Merge branch 'createPages' into 'main'
Странички /start, /create, /questions, /contacts, /result, /settings See merge request frontend/squiz!1
This commit is contained in:
commit
f4e81af4b1
8
.idea/.gitignore
vendored
Normal file
8
.idea/.gitignore
vendored
Normal file
@ -0,0 +1,8 @@
|
||||
# Default ignored files
|
||||
/shelf/
|
||||
/workspace.xml
|
||||
# Datasource local storage ignored files
|
||||
/dataSources/
|
||||
/dataSources.local.xml
|
||||
# Editor-based HTTP Client requests
|
||||
/httpRequests/
|
||||
6
.idea/inspectionProfiles/Project_Default.xml
Normal file
6
.idea/inspectionProfiles/Project_Default.xml
Normal file
@ -0,0 +1,6 @@
|
||||
<component name="InspectionProjectProfileManager">
|
||||
<profile version="1.0">
|
||||
<option name="myName" value="Project Default" />
|
||||
<inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
|
||||
</profile>
|
||||
</component>
|
||||
8
.idea/modules.xml
Normal file
8
.idea/modules.xml
Normal file
@ -0,0 +1,8 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ProjectModuleManager">
|
||||
<modules>
|
||||
<module fileurl="file://$PROJECT_DIR$/.idea/squiz.iml" filepath="$PROJECT_DIR$/.idea/squiz.iml" />
|
||||
</modules>
|
||||
</component>
|
||||
</project>
|
||||
8
.idea/squiz.iml
Normal file
8
.idea/squiz.iml
Normal file
@ -0,0 +1,8 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<module type="WEB_MODULE" version="4">
|
||||
<component name="NewModuleRootManager">
|
||||
<content url="file://$MODULE_DIR$" />
|
||||
<orderEntry type="inheritedJdk" />
|
||||
<orderEntry type="sourceFolder" forTests="false" />
|
||||
</component>
|
||||
</module>
|
||||
6
.idea/vcs.xml
Normal file
6
.idea/vcs.xml
Normal file
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="VcsDirectoryMappings">
|
||||
<mapping directory="$PROJECT_DIR$" vcs="Git" />
|
||||
</component>
|
||||
</project>
|
||||
0
README.md
Normal file → Executable file
0
README.md
Normal file → Executable file
17
craco.config.js
Executable file
17
craco.config.js
Executable file
@ -0,0 +1,17 @@
|
||||
const CracoAlias = require("craco-alias");
|
||||
|
||||
module.exports = {
|
||||
plugins: [
|
||||
{
|
||||
plugin: CracoAlias,
|
||||
options: {
|
||||
source: "tsconfig",
|
||||
// baseUrl SHOULD be specified
|
||||
// plugin does not take it from tsconfig
|
||||
baseUrl: "./src",
|
||||
// tsConfigPath should point to the file where "baseUrl" and "paths" are specified
|
||||
tsConfigPath: "./tsconfig.extend.json"
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
30178
package-lock.json
generated
Executable file
30178
package-lock.json
generated
Executable file
File diff suppressed because it is too large
Load Diff
15
package.json
Normal file → Executable file
15
package.json
Normal file → Executable file
@ -3,6 +3,7 @@
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@craco/craco": "^7.0.0",
|
||||
"@emotion/react": "^11.10.5",
|
||||
"@emotion/styled": "^11.10.5",
|
||||
"@mui/icons-material": "^5.10.14",
|
||||
@ -16,15 +17,16 @@
|
||||
"@types/react-dom": "^18.0.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "^6.6.2",
|
||||
"react-scripts": "5.0.1",
|
||||
"typescript": "^4.4.2",
|
||||
"web-vitals": "^2.1.0"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject"
|
||||
"start": "craco start",
|
||||
"build": "craco build",
|
||||
"test": "craco test",
|
||||
"eject": "craco eject"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
@ -53,5 +55,8 @@
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
},
|
||||
"devDependencies": {
|
||||
"craco-alias": "^3.0.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
0
public/favicon.ico
Normal file → Executable file
0
public/favicon.ico
Normal file → Executable file
|
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 3.8 KiB |
0
public/index.html
Normal file → Executable file
0
public/index.html
Normal file → Executable file
0
public/logo192.png
Normal file → Executable file
0
public/logo192.png
Normal file → Executable file
|
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 5.2 KiB |
0
public/logo512.png
Normal file → Executable file
0
public/logo512.png
Normal file → Executable file
|
Before Width: | Height: | Size: 9.4 KiB After Width: | Height: | Size: 9.4 KiB |
0
public/manifest.json
Normal file → Executable file
0
public/manifest.json
Normal file → Executable file
0
public/robots.txt
Normal file → Executable file
0
public/robots.txt
Normal file → Executable file
38
src/App.tsx
Normal file → Executable file
38
src/App.tsx
Normal file → Executable file
@ -1,37 +1,37 @@
|
||||
import { CssBaseline, ThemeProvider } from "@mui/material";
|
||||
import { CssBaseline } from "@mui/material";
|
||||
import { styled } from "@mui/material/styles";
|
||||
import CreateQuiz from "./components/CreateQuiz/CreateQuiz";
|
||||
import FirstQuiz from "./components/FirstQuiz";
|
||||
import FirstQuiz from "./pages/startPage/FirstQuiz";
|
||||
import MyQuizzes from "./components/MyQuizzes";
|
||||
import Navbar from "./components/Navbar/Navbar";
|
||||
import NavbarCreateQuiz from "./components/Navbar/NavbarCreateQuiz";
|
||||
import QuizGallery from "./components/QuizGallery";
|
||||
import lightTheme from "./utils/themes/light";
|
||||
import darkTheme from "./utils/themes/dark";
|
||||
|
||||
const Divider = styled("div")(() => ({
|
||||
height: "30px",
|
||||
backgroundColor: "black",
|
||||
height: "30px",
|
||||
backgroundColor: "black",
|
||||
}));
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<>
|
||||
<CssBaseline />
|
||||
<Navbar isLoggedIn={true} />
|
||||
<FirstQuiz />
|
||||
<Divider />
|
||||
|
||||
return (
|
||||
<ThemeProvider theme={lightTheme}>
|
||||
<CssBaseline />
|
||||
<Navbar isLoggedIn={true} />
|
||||
<FirstQuiz />
|
||||
<Divider />
|
||||
<MyQuizzes />
|
||||
<Divider />
|
||||
|
||||
<MyQuizzes />
|
||||
<Divider />
|
||||
<QuizGallery />
|
||||
<Divider />
|
||||
|
||||
<QuizGallery />
|
||||
<Divider />
|
||||
|
||||
<NavbarCreateQuiz />
|
||||
<CreateQuiz />
|
||||
</ThemeProvider>
|
||||
);
|
||||
<NavbarCreateQuiz />
|
||||
<CreateQuiz />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
||||
BIN
src/assets/Rectangle 110.png
Normal file
BIN
src/assets/Rectangle 110.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 130 KiB |
0
src/assets/card-1.png
Normal file → Executable file
0
src/assets/card-1.png
Normal file → Executable file
|
Before Width: | Height: | Size: 100 KiB After Width: | Height: | Size: 100 KiB |
0
src/assets/card-2.png
Normal file → Executable file
0
src/assets/card-2.png
Normal file → Executable file
|
Before Width: | Height: | Size: 116 KiB After Width: | Height: | Size: 116 KiB |
0
src/assets/card-3.png
Normal file → Executable file
0
src/assets/card-3.png
Normal file → Executable file
|
Before Width: | Height: | Size: 81 KiB After Width: | Height: | Size: 81 KiB |
5
src/assets/icon/ArrowCounterClockWise.svg
Normal file
5
src/assets/icon/ArrowCounterClockWise.svg
Normal file
@ -0,0 +1,5 @@
|
||||
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M24 0H6C2.68629 0 0 2.68629 0 6V24C0 27.3137 2.68629 30 6 30H24C27.3137 30 30 27.3137 30 24V6C30 2.68629 27.3137 0 24 0Z" fill="#F2F3F7"/>
|
||||
<path d="M9.35156 11.6836H3.72656V6.05859" stroke="#7E2AEA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M7.71094 22.2891C9.15283 23.7321 10.9903 24.7151 12.991 25.1137C14.9916 25.5123 17.0656 25.3086 18.9504 24.5283C20.8353 23.748 22.4464 22.4263 23.5799 20.7302C24.7134 19.0341 25.3185 17.04 25.3185 15C25.3185 12.96 24.7134 10.9659 23.5799 9.26981C22.4464 7.57375 20.8353 6.25197 18.9504 5.47169C17.0656 4.69141 14.9916 4.48768 12.991 4.88627C10.9903 5.28486 9.15283 6.26787 7.71094 7.71094L3.72656 11.6836" stroke="#7E2AEA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 875 B |
8
src/assets/icon/ShareNetwork.svg
Normal file
8
src/assets/icon/ShareNetwork.svg
Normal file
@ -0,0 +1,8 @@
|
||||
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="30" height="30" rx="6" fill="#F2F3F7"/>
|
||||
<path d="M7.5 18.75C9.57107 18.75 11.25 17.0711 11.25 15C11.25 12.9289 9.57107 11.25 7.5 11.25C5.42893 11.25 3.75 12.9289 3.75 15C3.75 17.0711 5.42893 18.75 7.5 18.75Z" stroke="#7E2AEA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M20.625 27.1875C22.6961 27.1875 24.375 25.5086 24.375 23.4375C24.375 21.3664 22.6961 19.6875 20.625 19.6875C18.5539 19.6875 16.875 21.3664 16.875 23.4375C16.875 25.5086 18.5539 27.1875 20.625 27.1875Z" stroke="#7E2AEA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M20.625 10.3125C22.6961 10.3125 24.375 8.63357 24.375 6.5625C24.375 4.49143 22.6961 2.8125 20.625 2.8125C18.5539 2.8125 16.875 4.49143 16.875 6.5625C16.875 8.63357 18.5539 10.3125 20.625 10.3125Z" stroke="#7E2AEA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M17.4766 8.58984L10.6562 12.9727" stroke="#7E2AEA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M10.6562 17.0273L17.4766 21.4102" stroke="#7E2AEA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
9
src/assets/icon/listChecks.svg
Normal file
9
src/assets/icon/listChecks.svg
Normal file
@ -0,0 +1,9 @@
|
||||
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M24 0H6C2.68629 0 0 2.68629 0 6V24C0 27.3137 2.68629 30 6 30H24C27.3137 30 30 27.3137 30 24V6C30 2.68629 27.3137 0 24 0Z" fill="#F2F3F7"/>
|
||||
<path d="M4.6875 15H15" stroke="#7E2AEA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M4.6875 7.5H15" stroke="#7E2AEA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M4.6875 22.5H15" stroke="#7E2AEA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M25.3125 5.625L21.2461 9.375L19.2188 7.5" stroke="#7E2AEA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M25.3125 13.125L21.2461 16.875L19.2188 15" stroke="#7E2AEA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M25.3125 20.625L21.2461 24.375L19.2188 22.5" stroke="#7E2AEA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 981 B |
0
src/assets/quiz-creation-1.png
Normal file → Executable file
0
src/assets/quiz-creation-1.png
Normal file → Executable file
|
Before Width: | Height: | Size: 191 KiB After Width: | Height: | Size: 191 KiB |
0
src/assets/quiz-creation-2.png
Normal file → Executable file
0
src/assets/quiz-creation-2.png
Normal file → Executable file
|
Before Width: | Height: | Size: 93 KiB After Width: | Height: | Size: 93 KiB |
0
src/assets/quiz-template-1.png
Normal file → Executable file
0
src/assets/quiz-template-1.png
Normal file → Executable file
|
Before Width: | Height: | Size: 124 KiB After Width: | Height: | Size: 124 KiB |
0
src/assets/quiz-template-2.png
Normal file → Executable file
0
src/assets/quiz-template-2.png
Normal file → Executable file
|
Before Width: | Height: | Size: 60 KiB After Width: | Height: | Size: 60 KiB |
0
src/assets/quiz-template-3.png
Normal file → Executable file
0
src/assets/quiz-template-3.png
Normal file → Executable file
|
Before Width: | Height: | Size: 170 KiB After Width: | Height: | Size: 170 KiB |
0
src/assets/quiz-template-4.png
Normal file → Executable file
0
src/assets/quiz-template-4.png
Normal file → Executable file
|
Before Width: | Height: | Size: 83 KiB After Width: | Height: | Size: 83 KiB |
0
src/assets/quiz-template-5.png
Normal file → Executable file
0
src/assets/quiz-template-5.png
Normal file → Executable file
|
Before Width: | Height: | Size: 124 KiB After Width: | Height: | Size: 124 KiB |
0
src/assets/quiz-template-6.png
Normal file → Executable file
0
src/assets/quiz-template-6.png
Normal file → Executable file
|
Before Width: | Height: | Size: 86 KiB After Width: | Height: | Size: 86 KiB |
25
src/components/Button/BackButton.tsx
Normal file
25
src/components/Button/BackButton.tsx
Normal file
@ -0,0 +1,25 @@
|
||||
import { Button } from "@mui/material";
|
||||
|
||||
export default function BackButton() {
|
||||
return (
|
||||
<Button
|
||||
sx={{
|
||||
border: "1px solid #7E2AEA",
|
||||
borderRadius: "8px",
|
||||
width: "64px",
|
||||
height: "44px",
|
||||
}}
|
||||
>
|
||||
<svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M17.25 8H0.75" stroke="#7E2AEA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path
|
||||
d="M7.5 1.25L0.75 8L7.5 14.75"
|
||||
stroke="#7E2AEA"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
0
src/components/ComplexHeader.tsx
Normal file → Executable file
0
src/components/ComplexHeader.tsx
Normal file → Executable file
0
src/components/ComplexNavText.tsx
Normal file → Executable file
0
src/components/ComplexNavText.tsx
Normal file → Executable file
0
src/components/CreateQuiz/CardWithImage.tsx
Normal file → Executable file
0
src/components/CreateQuiz/CardWithImage.tsx
Normal file → Executable file
112
src/components/CreateQuiz/CreateQuiz.tsx
Normal file → Executable file
112
src/components/CreateQuiz/CreateQuiz.tsx
Normal file → Executable file
@ -13,14 +13,15 @@ import PuzzlePieceIcon from "../icons/PuzzlePieceIcon";
|
||||
import GearIcon from "../icons/GearIcon";
|
||||
import LayoutIcon from "../icons/LayoutIcon";
|
||||
import CardWithImage from "./CardWithImage";
|
||||
import CreationCard from "./CreationCard";
|
||||
import CreationCard from "@ui_kit/CreationCard";
|
||||
import quizCreationImage1 from "../../assets/quiz-creation-1.png";
|
||||
import quizCreationImage2 from "../../assets/quiz-creation-2.png";
|
||||
import cardImage1 from "../../assets/card-1.png";
|
||||
import cardImage2 from "../../assets/card-2.png";
|
||||
import cardImage3 from "../../assets/card-3.png";
|
||||
import StartPageSettings from "./StartPageSettings";
|
||||
import StartPageSettings from "../../pages/startPage/StartPageSettings";
|
||||
import CustomButton from "../CustomButton";
|
||||
import Sidebar from "@ui_kit/Sidebar";
|
||||
|
||||
|
||||
const createQuizMenuItems = [
|
||||
@ -56,112 +57,7 @@ export default function CreateQuiz() {
|
||||
minHeight: "calc(100vh - 80px)",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
backgroundColor: theme.palette.lightPurple.main,
|
||||
minWidth: isMenuCollapsed ? "80px" : "230px",
|
||||
width: isMenuCollapsed ? "80px" : "230px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
py: "19px",
|
||||
transitionProperty: "width, min-width",
|
||||
transitionDuration: "200ms",
|
||||
overflow: "hidden",
|
||||
whiteSpace: "nowrap",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
pl: isMenuCollapsed ? undefined : "16px",
|
||||
pr: isMenuCollapsed ? undefined : "8px",
|
||||
mb: isMenuCollapsed ? "5px" : undefined,
|
||||
alignItems: "center",
|
||||
justifyContent: isMenuCollapsed ? "center" : undefined,
|
||||
}}
|
||||
>
|
||||
{!isMenuCollapsed &&
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: "14px",
|
||||
lineHeight: "20px",
|
||||
fontWeight: 500,
|
||||
color: theme.palette.grey2.main,
|
||||
}}
|
||||
>Создание квиза</Typography>
|
||||
}
|
||||
<IconButton onClick={handleMenuCollapseToggle} sx={{ ml: isMenuCollapsed ? undefined : "auto" }}>
|
||||
<CollapseMenuIcon height="16px" width="16px" color={theme.palette.grey2.main} transform={isMenuCollapsed ? "rotate(180deg)" : ""} />
|
||||
</IconButton>
|
||||
</Box>
|
||||
<List disablePadding>
|
||||
{createQuizMenuItems.map((menuItem, index) => {
|
||||
const Icon = menuItem[0];
|
||||
return (
|
||||
<MenuItem
|
||||
onClick={() => setActiveMenuItemIndex(index)}
|
||||
key={menuItem[1]}
|
||||
text={menuItem[1]}
|
||||
isCollapsed={isMenuCollapsed}
|
||||
isActive={activeMenuItemIndex === index}
|
||||
icon={<Icon
|
||||
color={activeMenuItemIndex === index ?
|
||||
theme.palette.brightPurple.main
|
||||
:
|
||||
isMenuCollapsed ?
|
||||
"white"
|
||||
:
|
||||
theme.palette.grey2.main
|
||||
}
|
||||
height={isMenuCollapsed ? "35px" : "24px"}
|
||||
width={isMenuCollapsed ? "35px" : "24px"}
|
||||
/>}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</List>
|
||||
{!isMenuCollapsed &&
|
||||
<Typography
|
||||
sx={{
|
||||
px: "16px",
|
||||
mt: "16px",
|
||||
mb: "11px",
|
||||
fontSize: "14px",
|
||||
lineHeight: "20px",
|
||||
fontWeight: 500,
|
||||
color: theme.palette.grey2.main,
|
||||
}}
|
||||
>Настройки квиза</Typography>
|
||||
}
|
||||
<List disablePadding>
|
||||
{quizSettingsMenuItems.map((menuItem, index) => {
|
||||
const Icon = menuItem[0];
|
||||
const totalIndex = index + createQuizMenuItems.length;
|
||||
const isActive = activeMenuItemIndex === totalIndex;
|
||||
return (
|
||||
<MenuItem
|
||||
onClick={() => setActiveMenuItemIndex(totalIndex)}
|
||||
key={menuItem[1]}
|
||||
text={menuItem[1]}
|
||||
isActive={isActive}
|
||||
isCollapsed={isMenuCollapsed}
|
||||
icon={<Icon
|
||||
color={isActive ?
|
||||
theme.palette.brightPurple.main
|
||||
:
|
||||
isMenuCollapsed ?
|
||||
"white"
|
||||
:
|
||||
theme.palette.grey2.main
|
||||
}
|
||||
height={isMenuCollapsed ? "35px" : "24px"}
|
||||
width={isMenuCollapsed ? "35px" : "24px"}
|
||||
/>}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</List>
|
||||
</Box>
|
||||
<Sidebar></Sidebar>
|
||||
<Container
|
||||
maxWidth="lg"
|
||||
disableGutters
|
||||
|
||||
0
src/components/CreateQuiz/MenuItem.tsx
Normal file → Executable file
0
src/components/CreateQuiz/MenuItem.tsx
Normal file → Executable file
0
src/components/CreateQuiz/SelectableButton.tsx
Normal file → Executable file
0
src/components/CreateQuiz/SelectableButton.tsx
Normal file → Executable file
0
src/components/CreateQuiz/SelectableIconButton.tsx
Normal file → Executable file
0
src/components/CreateQuiz/SelectableIconButton.tsx
Normal file → Executable file
5
src/components/CreateQuiz/UploadBox.tsx
Normal file → Executable file
5
src/components/CreateQuiz/UploadBox.tsx
Normal file → Executable file
@ -1,4 +1,4 @@
|
||||
import { Box, Typography, useTheme } from "@mui/material";
|
||||
import {Box, IconButton, Typography, useTheme} from "@mui/material";
|
||||
import { SxProps, Theme } from "@mui/material/styles";
|
||||
|
||||
|
||||
@ -24,7 +24,8 @@ export default function UploadBox({ sx, icon, text }: Props) {
|
||||
borderRadius: "8px",
|
||||
...sx,
|
||||
}}>
|
||||
{icon}
|
||||
{icon}
|
||||
|
||||
<Typography sx={{
|
||||
position: "absolute",
|
||||
right: "10px",
|
||||
|
||||
60
src/components/CreationFullCard.tsx
Normal file
60
src/components/CreationFullCard.tsx
Normal file
@ -0,0 +1,60 @@
|
||||
import { Box, Typography } from "@mui/material";
|
||||
|
||||
type Props = {
|
||||
text: string;
|
||||
text2: string;
|
||||
image: any;
|
||||
};
|
||||
|
||||
export default function CreationFullCard({ text, text2, image }: Props) {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
flexGrow: 1,
|
||||
backgroundColor: "white",
|
||||
p: "20px",
|
||||
borderRadius: "12px",
|
||||
display: "flex",
|
||||
boxShadow: `0px 100px 309px rgba(210, 208, 225, 0.24),
|
||||
0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525),
|
||||
0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066),
|
||||
0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12),
|
||||
0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343),
|
||||
0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)`,
|
||||
}}
|
||||
>
|
||||
<Box sx={{ mr: "104px", position: "relative" }}>
|
||||
<Typography variant="h5">Результаты квиза в зависимости от ответов</Typography>
|
||||
<Typography
|
||||
sx={{
|
||||
color: "#4D4D4D",
|
||||
mt: "20px",
|
||||
mb: "33px",
|
||||
width: "95%",
|
||||
}}
|
||||
>
|
||||
{text}
|
||||
</Typography>
|
||||
<Typography
|
||||
sx={{
|
||||
color: "#9A9AAF",
|
||||
width: "100%",
|
||||
position: "absolute",
|
||||
bottom: 0,
|
||||
}}
|
||||
>
|
||||
{text2}
|
||||
</Typography>
|
||||
</Box>
|
||||
<img
|
||||
src={image}
|
||||
alt="quiz creation"
|
||||
style={{
|
||||
display: "block",
|
||||
width: "520px",
|
||||
height: "270xp",
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
0
src/components/CustomButton.tsx
Normal file → Executable file
0
src/components/CustomButton.tsx
Normal file → Executable file
0
src/components/CustomTab.tsx
Normal file → Executable file
0
src/components/CustomTab.tsx
Normal file → Executable file
196
src/components/CustomWrapper.tsx
Normal file
196
src/components/CustomWrapper.tsx
Normal file
@ -0,0 +1,196 @@
|
||||
import { useState } from "react";
|
||||
import { Box, IconButton, SxProps, Theme, Typography, useMediaQuery, useTheme } from "@mui/material";
|
||||
|
||||
import CrossedEyeIcon from "@icons/CrossedEyeIcon";
|
||||
import CopyIcon from "@icons/CopyIcon";
|
||||
import TrashIcon from "@icons/TrashIcon";
|
||||
import CountIcon from "@icons/CountIcon";
|
||||
import MenuIcon from "@icons/MenuIcon";
|
||||
|
||||
interface Props {
|
||||
text: string;
|
||||
sx?: SxProps<Theme>;
|
||||
result?: boolean;
|
||||
}
|
||||
|
||||
export default function CustomWrapper({ text, sx, result }: Props) {
|
||||
const theme = useTheme();
|
||||
const upMd = useMediaQuery(theme.breakpoints.up("md"));
|
||||
const upSm = useMediaQuery(theme.breakpoints.up("sm"));
|
||||
const [isExpanded, setIsExpanded] = useState<boolean>(false);
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
width: "796px",
|
||||
|
||||
overflow: "hidden",
|
||||
borderRadius: "12px",
|
||||
boxShadow: `0px 100px 309px rgba(210, 208, 225, 0.24),
|
||||
0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525),
|
||||
0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066),
|
||||
0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12),
|
||||
0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343),
|
||||
0px 2.76726px 8.55082px rgba(210, 208, 225, 0.067
|
||||
4749)`,
|
||||
...sx,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
backgroundColor: "#333647",
|
||||
"&:first-of-type": {
|
||||
borderTopLeftRadius: "12px",
|
||||
borderTopRightRadius: "12px",
|
||||
},
|
||||
"&:last-of-type": {
|
||||
borderBottomLeftRadius: "12px",
|
||||
borderBottomRightRadius: "12px",
|
||||
},
|
||||
"&:not(:last-of-type)": {
|
||||
borderBottom: `1px solid ${theme.palette.grey2.main}`,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
onClick={() => setIsExpanded((prev) => !prev)}
|
||||
sx={{
|
||||
height: "88px",
|
||||
px: "20px",
|
||||
border: "1px solid white",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
cursor: "pointer",
|
||||
userSelect: "none",
|
||||
"&:hover": {
|
||||
borderColor: "#7E2AEA",
|
||||
borderRadius: `${isExpanded ? "" : "12px"}`,
|
||||
borderTopLeftRadius: "12px",
|
||||
borderTopRightRadius: "12px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: "18px",
|
||||
lineHeight: upMd ? undefined : "19px",
|
||||
fontWeight: 400,
|
||||
color: "#FFFFFF",
|
||||
px: 0,
|
||||
}}
|
||||
>
|
||||
{text}
|
||||
</Typography>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
height: "100%",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
{result ? (
|
||||
<>
|
||||
<svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect y="0.8125" width="30" height="30" rx="6" fill="#252734" />
|
||||
<path
|
||||
d="M7.5 19.5625L15 12.0625L22.5 19.5625"
|
||||
stroke="#7E2AEA"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<IconButton>
|
||||
<CrossedEyeIcon />
|
||||
</IconButton>
|
||||
<IconButton>
|
||||
<CopyIcon />
|
||||
</IconButton>
|
||||
|
||||
<IconButton>
|
||||
<TrashIcon />
|
||||
</IconButton>
|
||||
<Box
|
||||
sx={{
|
||||
borderLeft: upSm ? "1px solid #9A9AAF" : "none",
|
||||
pl: upSm ? "2px" : 0,
|
||||
height: "50%",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<IconButton>
|
||||
<CountIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
|
||||
<IconButton>
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
</>
|
||||
) : (
|
||||
<svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect y="0.8125" width="30" height="30" rx="6" fill="#252734" />
|
||||
<path
|
||||
d="M7.5 19.5625L15 12.0625L22.5 19.5625"
|
||||
stroke="#7E2AEA"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
{isExpanded && (
|
||||
<Box
|
||||
sx={{
|
||||
px: "20px",
|
||||
py: upMd ? "25px" : undefined,
|
||||
pt: upMd ? undefined : "15px",
|
||||
pb: upMd ? undefined : "25px",
|
||||
backgroundColor: "#F1F2F6",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
gap: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: upMd ? undefined : "16px",
|
||||
lineHeight: upMd ? undefined : "19px",
|
||||
color: theme.palette.grey3.main,
|
||||
}}
|
||||
>
|
||||
desc
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
gap: "10px",
|
||||
alignItems: "center",
|
||||
width: upSm ? "195px" : "123px",
|
||||
marginRight: upSm ? "65px" : 0,
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
sx={{
|
||||
color: theme.palette.grey3.main,
|
||||
fontSize: upSm ? "20px" : "16px",
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
10 руб.
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
89
src/components/DescriptionForm/ButtinsOptionsForm.tsx
Normal file
89
src/components/DescriptionForm/ButtinsOptionsForm.tsx
Normal file
@ -0,0 +1,89 @@
|
||||
import React from "react";
|
||||
import { Box, IconButton, useTheme } from "@mui/material";
|
||||
|
||||
import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
|
||||
|
||||
import SettingIcon from "@icons/questionsPage/settingIcon";
|
||||
import Branching from "@icons/questionsPage/branching";
|
||||
import HideIcon from "@icons/questionsPage/hideIcon";
|
||||
import CopyIcon from "@icons/questionsPage/CopyIcon";
|
||||
import DeleteIcon from "@icons/questionsPage/deleteIcon";
|
||||
|
||||
import StarIconPoints from "./StarIconsPoints";
|
||||
|
||||
interface Props {
|
||||
switchState: string;
|
||||
SSHC: (data: string) => void;
|
||||
}
|
||||
|
||||
export default function ButtonsOptionsForm({ SSHC, switchState }: Props) {
|
||||
const theme = useTheme();
|
||||
|
||||
const buttonSetting: { icon: JSX.Element; title: string; value: string }[] = [
|
||||
{
|
||||
icon: <SettingIcon color={switchState === "setting" ? "#ffffff" : theme.palette.grey3.main} />,
|
||||
title: "Настройки",
|
||||
value: "setting",
|
||||
},
|
||||
{
|
||||
icon: <Branching color={switchState === "branching" ? "#ffffff" : theme.palette.grey3.main} />,
|
||||
title: "Ветвление",
|
||||
value: "branching",
|
||||
},
|
||||
{
|
||||
icon: <StarIconPoints color={switchState === "Points" ? "#ffffff" : theme.palette.grey3.main} />,
|
||||
title: "Баллы",
|
||||
value: "points",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
width: "100%",
|
||||
background: "#F2F3F7",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
padding: "20px",
|
||||
display: "flex",
|
||||
gap: "10px",
|
||||
}}
|
||||
>
|
||||
{buttonSetting.map(({ icon, title, value }, index) => (
|
||||
<MiniButtonSetting
|
||||
key={index}
|
||||
onClick={() => {
|
||||
SSHC(value);
|
||||
}}
|
||||
sx={{
|
||||
backgroundColor: switchState === value ? theme.palette.brightPurple.main : "transparent",
|
||||
color: switchState === value ? "#ffffff" : theme.palette.grey3.main,
|
||||
}}
|
||||
>
|
||||
{icon}
|
||||
{title}
|
||||
</MiniButtonSetting>
|
||||
))}
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
padding: "20px",
|
||||
}}
|
||||
>
|
||||
<IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
|
||||
<HideIcon />
|
||||
</IconButton>
|
||||
<IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
|
||||
<CopyIcon />
|
||||
</IconButton>
|
||||
<IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
|
||||
<DeleteIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
189
src/components/DescriptionForm/DescriptionForm.tsx
Normal file
189
src/components/DescriptionForm/DescriptionForm.tsx
Normal file
@ -0,0 +1,189 @@
|
||||
import React from "react";
|
||||
import { useState } from "react";
|
||||
import { Box, IconButton, TextField, Typography } from "@mui/material";
|
||||
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
|
||||
|
||||
import CustomButton from "../CustomButton";
|
||||
|
||||
import SwitchAnswerOptions from "./SwitchAnswerOptions";
|
||||
import ButtonsOptionsForm from "./ButtinsOptionsForm";
|
||||
import PriceButtons from "./PriceButton";
|
||||
import DiscountButtons from "./DiscountButtons";
|
||||
|
||||
import CustomTextField from "@ui_kit/CustomTextField";
|
||||
|
||||
import OneIcon from "@icons/questionsPage/OneIcon";
|
||||
import DeleteIcon from "@icons/questionsPage/deleteIcon";
|
||||
import PointsIcon from "@icons/questionsPage/PointsIcon";
|
||||
import Info from "@icons/Info";
|
||||
|
||||
import ImageAndVideoButtons from "./ImageAndVideoButtons";
|
||||
|
||||
export const DescriptionForm = () => {
|
||||
const [switchState, setSwitchState] = useState<string>("");
|
||||
const [priceButtonsActive, setPriceButtonsActive] = useState<number>(0);
|
||||
const [priceButtonsType, setPriceButtonsType] = useState<string>();
|
||||
const [forwarding, setForwarding] = useState<boolean>(false);
|
||||
|
||||
const buttonsActive = (index: number, type: string) => {
|
||||
setPriceButtonsActive(index);
|
||||
setPriceButtonsType(type);
|
||||
};
|
||||
|
||||
const SSHC = (data: string) => {
|
||||
setSwitchState(data);
|
||||
};
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
width: "796px",
|
||||
height: "100%",
|
||||
bgcolor: "#FFFFFF",
|
||||
borderRadius: "12px",
|
||||
}}
|
||||
>
|
||||
<Box sx={{ p: "0 20px", pt: "30px" }}>
|
||||
<Box sx={{ width: "100%", maxWidth: "760px", display: "flex", alignItems: "center", gap: "10px", mb: "19px" }}>
|
||||
<CustomTextField placeholder="Заголовок вопроса" text={""} />
|
||||
<IconButton>
|
||||
<ExpandMoreIcon />
|
||||
</IconButton>
|
||||
<OneIcon />
|
||||
<PointsIcon />
|
||||
</Box>
|
||||
|
||||
<Box sx={{ display: "flex" }}>
|
||||
<PriceButtons ButtonsActive={buttonsActive} priceButtonsActive={priceButtonsActive} />
|
||||
<DiscountButtons />
|
||||
</Box>
|
||||
|
||||
<TextField
|
||||
fullWidth
|
||||
placeholder="Описание"
|
||||
sx={{
|
||||
"& .MuiInputBase-root": {
|
||||
backgroundColor: "#F2F3F7",
|
||||
width: "100%",
|
||||
height: "110px",
|
||||
borderRadius: "10px",
|
||||
},
|
||||
}}
|
||||
inputProps={{
|
||||
sx: {
|
||||
borderRadius: "10px",
|
||||
fontSize: "18px",
|
||||
lineHeight: "21px",
|
||||
py: 0,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<ImageAndVideoButtons />
|
||||
{priceButtonsType === "smooth" ? (
|
||||
<Box sx={{ mb: "20px" }}>
|
||||
<Box sx={{ display: "flex", alignItems: "center", mb: "14xp" }}>
|
||||
<Typography component={"h6"} sx={{ weight: "500", fontSize: "18px" }}>
|
||||
Призыв к действию
|
||||
</Typography>
|
||||
<IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
|
||||
<DeleteIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
<Box sx={{ display: "flex" }}>
|
||||
<TextField
|
||||
placeholder="Узнать подробнее"
|
||||
fullWidth
|
||||
sx={{
|
||||
width: "410px",
|
||||
"& .MuiInputBase-root": {
|
||||
backgroundColor: "#F2F3F7",
|
||||
width: "410px",
|
||||
height: "48px",
|
||||
borderRadius: "10px",
|
||||
},
|
||||
}}
|
||||
inputProps={{
|
||||
sx: {
|
||||
borderRadius: "10px",
|
||||
fontSize: "18px",
|
||||
lineHeight: "21px",
|
||||
py: 0,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<CustomButton
|
||||
onClick={() => setForwarding(true)}
|
||||
variant="contained"
|
||||
sx={{
|
||||
display: forwarding ? "none" : "",
|
||||
ml: "20px",
|
||||
mb: "20px",
|
||||
color: "#9A9AAF",
|
||||
backgroundColor: "#F2F3F7",
|
||||
width: "194px",
|
||||
height: "48px",
|
||||
border: "1px solid #9A9AAF",
|
||||
}}
|
||||
>
|
||||
Переадрисация +
|
||||
</CustomButton>
|
||||
{forwarding ? (
|
||||
<Box sx={{ ml: "20px", mt: "-36px" }}>
|
||||
<Box sx={{ display: "flex", alignItems: "center", mb: "14xp" }}>
|
||||
<Typography component={"h6"} sx={{ weight: "500", fontSize: "18px" }}>
|
||||
Переадресация
|
||||
</Typography>
|
||||
<IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
|
||||
<DeleteIcon />
|
||||
</IconButton>
|
||||
<Info />
|
||||
</Box>
|
||||
<Box>
|
||||
<TextField
|
||||
placeholder="https://exemple.ru"
|
||||
fullWidth
|
||||
sx={{
|
||||
"& .MuiInputBase-root": {
|
||||
backgroundColor: "#F2F3F7",
|
||||
width: "326px",
|
||||
height: "48px",
|
||||
borderRadius: "10px",
|
||||
},
|
||||
}}
|
||||
inputProps={{
|
||||
sx: {
|
||||
borderRadius: "10px",
|
||||
fontSize: "18px",
|
||||
lineHeight: "21px",
|
||||
py: 0,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
) : (
|
||||
<React.Fragment />
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
) : (
|
||||
<CustomButton
|
||||
variant="contained"
|
||||
sx={{
|
||||
mb: "20px",
|
||||
color: "#9A9AAF",
|
||||
backgroundColor: "#F2F3F7",
|
||||
width: "119px",
|
||||
height: "48px",
|
||||
border: "1px solid #9A9AAF",
|
||||
}}
|
||||
>
|
||||
Кнопка +
|
||||
</CustomButton>
|
||||
)}
|
||||
</Box>
|
||||
<ButtonsOptionsForm switchState={switchState} SSHC={SSHC} />
|
||||
<SwitchAnswerOptions switchState={switchState} />
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
58
src/components/DescriptionForm/DiscountButtons.tsx
Normal file
58
src/components/DescriptionForm/DiscountButtons.tsx
Normal file
@ -0,0 +1,58 @@
|
||||
import DeleteIcon from "@icons/questionsPage/deleteIcon";
|
||||
import { Box, IconButton, Typography } from "@mui/material";
|
||||
import CustomButton from "../../components/CustomButton";
|
||||
|
||||
export default function DiscountButtons() {
|
||||
return (
|
||||
<Box sx={{ ml: "40px" }}>
|
||||
<Box sx={{ display: "flex", alignItems: "center", mb: "14xp" }}>
|
||||
<Typography component={"h6"} sx={{ weight: "500", fontSize: "18px" }}>
|
||||
Скидка
|
||||
</Typography>
|
||||
<IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
|
||||
<DeleteIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
<Box component="div" sx={{ mb: "20px" }}>
|
||||
<CustomButton
|
||||
variant="contained"
|
||||
sx={{
|
||||
color: "#9A9AAF",
|
||||
backgroundColor: "#F2F3F7",
|
||||
width: "86px",
|
||||
height: "48px",
|
||||
border: "1px solid #9A9AAF",
|
||||
}}
|
||||
>
|
||||
10000
|
||||
</CustomButton>
|
||||
<CustomButton
|
||||
variant="contained"
|
||||
sx={{
|
||||
color: "#FFFF",
|
||||
backgroundColor: "#7E2AEA",
|
||||
width: "53px",
|
||||
height: "48px",
|
||||
ml: "8px",
|
||||
border: "1px solid #9A9AAF",
|
||||
}}
|
||||
>
|
||||
₽
|
||||
</CustomButton>
|
||||
<CustomButton
|
||||
variant="contained"
|
||||
sx={{
|
||||
color: "#9A9AAF",
|
||||
backgroundColor: "#F2F3F7",
|
||||
width: "53px",
|
||||
height: "48px",
|
||||
ml: "8px",
|
||||
border: "1px solid #9A9AAF",
|
||||
}}
|
||||
>
|
||||
%
|
||||
</CustomButton>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
35
src/components/DescriptionForm/ImageAndVideoButtons.tsx
Normal file
35
src/components/DescriptionForm/ImageAndVideoButtons.tsx
Normal file
@ -0,0 +1,35 @@
|
||||
import { Box, Typography, useTheme } from "@mui/material";
|
||||
|
||||
import AddImage from "@icons/questionsPage/addImage";
|
||||
import AddVideofile from "@icons/questionsPage/addVideofile";
|
||||
|
||||
export default function ImageAndVideoButtons() {
|
||||
const theme = useTheme();
|
||||
return (
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: "12px", mt: "20px", mb: "20px" }}>
|
||||
<AddImage />
|
||||
<Typography
|
||||
sx={{
|
||||
fontWeight: 400,
|
||||
fontSize: "16px",
|
||||
lineHeight: "18.96px",
|
||||
color: theme.palette.grey2.main,
|
||||
}}
|
||||
>
|
||||
Изображение
|
||||
</Typography>
|
||||
<Typography> или</Typography>
|
||||
<AddVideofile />
|
||||
<Typography
|
||||
sx={{
|
||||
fontWeight: 400,
|
||||
fontSize: "16px",
|
||||
lineHeight: "18.96px",
|
||||
color: theme.palette.grey2.main,
|
||||
}}
|
||||
>
|
||||
Видео
|
||||
</Typography>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
237
src/components/DescriptionForm/PointsQuestions.tsx
Normal file
237
src/components/DescriptionForm/PointsQuestions.tsx
Normal file
@ -0,0 +1,237 @@
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
FormControl,
|
||||
FormControlLabel,
|
||||
IconButton,
|
||||
Link,
|
||||
MenuItem,
|
||||
Modal,
|
||||
Radio,
|
||||
RadioGroup,
|
||||
Select,
|
||||
SelectChangeEvent,
|
||||
TextField,
|
||||
Typography,
|
||||
useTheme,
|
||||
} from "@mui/material";
|
||||
import * as React from "react";
|
||||
import InfoIcon from "@icons/InfoIcon";
|
||||
import ArrowDown from "@icons/ArrowDownIcon";
|
||||
import CustomButton from "../../components/CustomButton";
|
||||
import { useState } from "react";
|
||||
import DeleteIcon from "@icons/questionsPage/deleteIcon";
|
||||
|
||||
export default function PointsQuestions() {
|
||||
const theme = useTheme();
|
||||
const [open, setOpen] = useState(false);
|
||||
const [condition, setCondition] = useState<boolean>(false);
|
||||
const handleOpen = () => setOpen(true);
|
||||
const handleClose = () => setOpen(false);
|
||||
|
||||
const [display, setDisplay] = React.useState("1");
|
||||
const handleChange = (event: SelectChangeEvent) => {
|
||||
setDisplay(event.target.value);
|
||||
};
|
||||
|
||||
const [value, setValue] = React.useState("1");
|
||||
|
||||
const handleChangeRadio = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setValue((event.target as HTMLInputElement).value);
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<Button onClick={handleOpen}>открыть</Button>
|
||||
<Modal
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
aria-labelledby="modal-modal-title"
|
||||
aria-describedby="modal-modal-description"
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
position: "absolute" as "absolute",
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
maxWidth: "620px",
|
||||
width: "100%",
|
||||
bgcolor: "background.paper",
|
||||
borderRadius: "12px",
|
||||
|
||||
boxShadow: 24,
|
||||
p: 0,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
padding: "20px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "30px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
gap: "20px",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Typography sx={{ mb: "14px" }}>Показать, если количество баллов</Typography>
|
||||
<Box sx={{ display: "flex" }}>
|
||||
<FormControl
|
||||
fullWidth
|
||||
size="small"
|
||||
sx={{
|
||||
width: "282px",
|
||||
maxWidth: "140px",
|
||||
height: "48px",
|
||||
}}
|
||||
>
|
||||
<Select
|
||||
id="display-select"
|
||||
variant="outlined"
|
||||
value={display}
|
||||
displayEmpty
|
||||
onChange={handleChange}
|
||||
sx={{
|
||||
width: "282px",
|
||||
height: "48px",
|
||||
borderRadius: "8px",
|
||||
"& .MuiOutlinedInput-notchedOutline": {
|
||||
border: `1px solid ${theme.palette.brightPurple.main} !important`,
|
||||
},
|
||||
}}
|
||||
MenuProps={{
|
||||
PaperProps: {
|
||||
sx: {
|
||||
mt: "8px",
|
||||
p: "4px",
|
||||
borderRadius: "8px",
|
||||
border: "1px solid #EEE4FC",
|
||||
boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)",
|
||||
},
|
||||
},
|
||||
MenuListProps: {
|
||||
sx: {
|
||||
py: 0,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "8px",
|
||||
"& .Mui-selected": {
|
||||
backgroundColor: theme.palette.background.default,
|
||||
color: theme.palette.brightPurple.main,
|
||||
},
|
||||
},
|
||||
},
|
||||
}}
|
||||
inputProps={{
|
||||
sx: {
|
||||
color: theme.palette.brightPurple.main,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
px: "9px",
|
||||
gap: "20px",
|
||||
},
|
||||
}}
|
||||
IconComponent={(props) => <ArrowDown {...props} />}
|
||||
>
|
||||
<MenuItem
|
||||
value={1}
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "20px",
|
||||
p: "4px",
|
||||
borderRadius: "5px",
|
||||
color: theme.palette.grey2.main,
|
||||
}}
|
||||
>
|
||||
Больше
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
value={2}
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "20px",
|
||||
p: "4px",
|
||||
borderRadius: "5px",
|
||||
color: theme.palette.grey2.main,
|
||||
}}
|
||||
>
|
||||
Меньше
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
value={3}
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "20px",
|
||||
p: "4px",
|
||||
borderRadius: "5px",
|
||||
color: theme.palette.grey2.main,
|
||||
}}
|
||||
>
|
||||
Между
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
value={4}
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "20px",
|
||||
p: "4px",
|
||||
borderRadius: "5px",
|
||||
color: theme.palette.grey2.main,
|
||||
}}
|
||||
>
|
||||
Ровно
|
||||
</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
<TextField
|
||||
// value={text}
|
||||
placeholder="100"
|
||||
fullWidth
|
||||
sx={{
|
||||
ml: "160px",
|
||||
"& .MuiInputBase-root": {
|
||||
backgroundColor: "#F2F3F7",
|
||||
width: "282px",
|
||||
height: "48px",
|
||||
borderRadius: "10px",
|
||||
},
|
||||
}}
|
||||
inputProps={{
|
||||
sx: {
|
||||
borderRadius: "10px",
|
||||
fontSize: "18px",
|
||||
lineHeight: "21px",
|
||||
py: 0,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box sx={{ display: "flex", justifyContent: "end", gap: "10px" }}>
|
||||
<CustomButton
|
||||
onClick={() => handleClose()}
|
||||
variant="contained"
|
||||
sx={{
|
||||
backgroundColor: theme.palette.brightPurple.main,
|
||||
color: "white",
|
||||
width: "auto",
|
||||
px: "20px",
|
||||
py: "9px",
|
||||
}}
|
||||
>
|
||||
Готово
|
||||
</CustomButton>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
93
src/components/DescriptionForm/PriceButton.tsx
Normal file
93
src/components/DescriptionForm/PriceButton.tsx
Normal file
@ -0,0 +1,93 @@
|
||||
import { Box, IconButton, SxProps, Theme, Typography } from "@mui/material";
|
||||
|
||||
import CustomButton from "../../components/CustomButton";
|
||||
|
||||
import DeleteIcon from "@icons/questionsPage/deleteIcon";
|
||||
|
||||
const priceButtonsArray: { title: string; type: string; sx: SxProps<Theme> }[] = [
|
||||
{
|
||||
title: "10000 ₽",
|
||||
type: "10000 ₽",
|
||||
sx: {
|
||||
width: "110px",
|
||||
height: "48px",
|
||||
border: "1px solid #9A9AAF",
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "Ровно",
|
||||
type: "smooth",
|
||||
sx: {
|
||||
width: "94px",
|
||||
height: "48px",
|
||||
ml: "8px",
|
||||
border: "1px solid #9A9AAF",
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "От и до",
|
||||
type: "fromAndTo",
|
||||
sx: {
|
||||
width: "93px",
|
||||
height: "48px",
|
||||
ml: "8px",
|
||||
border: "1px solid #9A9AAF",
|
||||
whiteSpace: "nowrap",
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "ƒ",
|
||||
type: "ƒ",
|
||||
sx: {
|
||||
width: "38px",
|
||||
height: "48px",
|
||||
ml: "8px",
|
||||
border: "1px solid #9A9AAF",
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "Скидка",
|
||||
type: "discount",
|
||||
sx: {
|
||||
width: "93px",
|
||||
height: "48px",
|
||||
border: "1px solid #9A9AAF",
|
||||
ml: "8px",
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
type Props = {
|
||||
ButtonsActive: (index: number, type: string) => void;
|
||||
priceButtonsActive: number | undefined;
|
||||
};
|
||||
|
||||
export default function PriceButtons({ ButtonsActive, priceButtonsActive }: Props) {
|
||||
return (
|
||||
<Box>
|
||||
<Box sx={{ display: "flex", alignItems: "center", mb: "14xp" }}>
|
||||
<Typography component={"h6"} sx={{ weight: "500", fontSize: "18px" }}>
|
||||
Стоимость
|
||||
</Typography>
|
||||
<IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
|
||||
<DeleteIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
<Box component="div" sx={{ mb: "20px" }}>
|
||||
{priceButtonsArray.map(({ title, type, sx }, index) => (
|
||||
<CustomButton
|
||||
onClick={() => ButtonsActive(index, type)}
|
||||
key={title}
|
||||
sx={{
|
||||
bgcolor: priceButtonsActive === index ? "#7E2AEA" : "#F2F3F7",
|
||||
color: priceButtonsActive === index ? "#FFFF" : "#9A9AAF",
|
||||
...sx,
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</CustomButton>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
24
src/components/DescriptionForm/StarIconsPoints.tsx
Normal file
24
src/components/DescriptionForm/StarIconsPoints.tsx
Normal file
@ -0,0 +1,24 @@
|
||||
import { Box } from "@mui/material";
|
||||
|
||||
interface Props {
|
||||
color: string;
|
||||
}
|
||||
|
||||
export default function StarIconPoints({ color }: Props) {
|
||||
return (
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M7 9.24452L5.1458 10.2695L5.5 8.09854L4 6.56119L6.0729 6.24468L7 4.26953L7.9271 6.24468L10 6.56119L8.5 8.09854L8.8542 10.2695L7 9.24452Z"
|
||||
stroke={color}
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M1 7.26953C1 10.5832 3.68629 13.2695 7 13.2695C10.3137 13.2695 13 10.5832 13 7.26953C13 3.95582 10.3137 1.26953 7 1.26953C3.68629 1.26953 1 3.95582 1 7.26953Z"
|
||||
stroke={color}
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
53
src/components/DescriptionForm/SwitchAnswerOptions.tsx
Normal file
53
src/components/DescriptionForm/SwitchAnswerOptions.tsx
Normal file
@ -0,0 +1,53 @@
|
||||
import Info from "@icons/Info";
|
||||
import { Box, TextField } from "@mui/material";
|
||||
import BranchingQuestions from "../../pages/Questions/branchingQuestions";
|
||||
import PointsQuestions from "./PointsQuestions";
|
||||
|
||||
interface Props {
|
||||
switchState: string;
|
||||
}
|
||||
|
||||
function ResponseSettings() {
|
||||
return (
|
||||
<Box sx={{ display: "flex", p: "0 20px", pt: "30px", pb: "20px" }}>
|
||||
<TextField
|
||||
// value={text}
|
||||
placeholder="Узнать подробнее"
|
||||
fullWidth
|
||||
sx={{
|
||||
"& .MuiInputBase-root": {
|
||||
backgroundColor: "#F2F3F7",
|
||||
width: "640px",
|
||||
height: "48px",
|
||||
borderRadius: "10px",
|
||||
},
|
||||
}}
|
||||
inputProps={{
|
||||
sx: {
|
||||
borderRadius: "10px",
|
||||
fontSize: "18px",
|
||||
lineHeight: "21px",
|
||||
py: 0,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<Info />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default function SwitchAnswerOptions({ switchState = "setting" }: Props) {
|
||||
switch (switchState) {
|
||||
case "setting":
|
||||
return <ResponseSettings />;
|
||||
break;
|
||||
case "branching":
|
||||
return <BranchingQuestions />;
|
||||
break;
|
||||
case "points":
|
||||
return <PointsQuestions />;
|
||||
break;
|
||||
default:
|
||||
return <></>;
|
||||
}
|
||||
}
|
||||
0
src/components/ExpandableQuizBlock.tsx
Normal file → Executable file
0
src/components/ExpandableQuizBlock.tsx
Normal file → Executable file
@ -1,34 +0,0 @@
|
||||
import { Typography, useTheme } from "@mui/material";
|
||||
import ComplexNavText from "./ComplexNavText";
|
||||
import CustomButton from "./CustomButton";
|
||||
import SectionWrapper from "./SectionWrapper";
|
||||
|
||||
|
||||
export default function FirstQuiz() {
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<SectionWrapper
|
||||
maxWidth="lg"
|
||||
sx={{
|
||||
mt: "25px",
|
||||
mb: "70px",
|
||||
}}
|
||||
>
|
||||
<ComplexNavText text1="Кабинет квизов" />
|
||||
<Typography
|
||||
variant="h4"
|
||||
sx={{
|
||||
mt: "20px",
|
||||
mb: "30px",
|
||||
}}
|
||||
>Создайте свой первый квиз</Typography>
|
||||
<CustomButton
|
||||
variant="contained"
|
||||
sx={{
|
||||
backgroundColor: theme.palette.brightPurple.main
|
||||
}}
|
||||
>Создать +</CustomButton>
|
||||
</SectionWrapper>
|
||||
);
|
||||
}
|
||||
0
src/components/MyQuizzes.tsx
Normal file → Executable file
0
src/components/MyQuizzes.tsx
Normal file → Executable file
0
src/components/NavMenuItem.tsx
Normal file → Executable file
0
src/components/NavMenuItem.tsx
Normal file → Executable file
0
src/components/Navbar/Avatar.tsx
Normal file → Executable file
0
src/components/Navbar/Avatar.tsx
Normal file → Executable file
4
src/components/Navbar/Navbar.tsx
Normal file → Executable file
4
src/components/Navbar/Navbar.tsx
Normal file → Executable file
@ -1,6 +1,6 @@
|
||||
import NavbarCollapsed from "./NavbarCollapsed";
|
||||
import NavbarCreateQuiz from "./NavbarCreateQuiz";
|
||||
import NavbarFull from "./NavbarFull";
|
||||
import Header from "@ui_kit/Header";
|
||||
|
||||
|
||||
interface Props {
|
||||
@ -17,5 +17,5 @@ export default function Navbar({ isLoggedIn, isCollapsed = false, mode = "defaul
|
||||
mode === "createQuiz" ?
|
||||
<NavbarCreateQuiz />
|
||||
:
|
||||
<NavbarFull isLoggedIn={isLoggedIn} />;
|
||||
<Header isLoggedIn={true} />;
|
||||
}
|
||||
0
src/components/Navbar/NavbarCollapsed.tsx
Normal file → Executable file
0
src/components/Navbar/NavbarCollapsed.tsx
Normal file → Executable file
0
src/components/Navbar/NavbarCreateQuiz.tsx
Normal file → Executable file
0
src/components/Navbar/NavbarCreateQuiz.tsx
Normal file → Executable file
@ -1,117 +0,0 @@
|
||||
import { Box, Button, Container, IconButton, Typography, useTheme } from "@mui/material";
|
||||
import LogoutIcon from "../icons/LogoutIcon";
|
||||
import NavMenuItem from "../NavMenuItem";
|
||||
import PenaLogo from "../PenaLogo";
|
||||
import SectionWrapper from "../SectionWrapper";
|
||||
import WalletIcon from "../icons/WalletIcon";
|
||||
import CustomAvatar from "./Avatar";
|
||||
|
||||
|
||||
interface Props {
|
||||
isLoggedIn: boolean;
|
||||
}
|
||||
|
||||
export default function NavbarFull({ isLoggedIn }: Props) {
|
||||
const theme = useTheme();
|
||||
|
||||
return isLoggedIn ? (
|
||||
<Container
|
||||
component="nav"
|
||||
disableGutters
|
||||
maxWidth={false}
|
||||
sx={{
|
||||
px: "16px",
|
||||
display: "flex",
|
||||
height: "80px",
|
||||
alignItems: "center",
|
||||
gap: "60px",
|
||||
bgcolor: "white",
|
||||
borderBottom: "1px solid #E3E3E3",
|
||||
}}
|
||||
>
|
||||
<PenaLogo width={124} />
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
gap: "30px",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
<NavMenuItem text="Меню 1" />
|
||||
<NavMenuItem text="Меню 2" isActive />
|
||||
<NavMenuItem text="Меню 3" />
|
||||
<NavMenuItem text="Меню 4" />
|
||||
<NavMenuItem text="Меню 5" />
|
||||
<NavMenuItem text="Меню 1" />
|
||||
<NavMenuItem text="Меню 2" />
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
ml: "auto",
|
||||
}}
|
||||
>
|
||||
<IconButton sx={{ p: 0 }}>
|
||||
<WalletIcon color={theme.palette.grey2.main} bgcolor="#F2F3F7" />
|
||||
</IconButton>
|
||||
<Box sx={{ ml: "8px", whiteSpace: "nowrap" }}>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: "12px",
|
||||
lineHeight: "14px",
|
||||
color: theme.palette.grey3.main,
|
||||
}}
|
||||
>Мой баланс</Typography>
|
||||
<Typography variant="body2" color={theme.palette.brightPurple.main}>00.00 руб.</Typography>
|
||||
</Box>
|
||||
<CustomAvatar sx={{ ml: "27px", backgroundColor: theme.palette.orange.main, height: "36px", width: "36px" }} />
|
||||
<IconButton
|
||||
sx={{ ml: "20px", bgcolor: "#F2F3F7", borderRadius: "6px", height: "36px", width: "36px" }}
|
||||
>
|
||||
<LogoutIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Container>
|
||||
) : (
|
||||
<SectionWrapper
|
||||
component="nav"
|
||||
maxWidth="lg"
|
||||
outerContainerSx={{
|
||||
backgroundColor: theme.palette.lightPurple.main,
|
||||
// borderBottom: "1px solid #E3E3E3",
|
||||
}}
|
||||
sx={{
|
||||
px: "20px",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
height: "80px",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
gap: "30px",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
<NavMenuItem text="Меню 1" />
|
||||
<NavMenuItem text="Меню 2" isActive />
|
||||
<NavMenuItem text="Меню 3" />
|
||||
<NavMenuItem text="Меню 4" />
|
||||
<NavMenuItem text="Меню 5" />
|
||||
<NavMenuItem text="Меню 1" />
|
||||
<NavMenuItem text="Меню 2" />
|
||||
</Box>
|
||||
<Button
|
||||
variant="outlined"
|
||||
sx={{
|
||||
px: "18px",
|
||||
py: "10px",
|
||||
borderColor: "white",
|
||||
borderRadius: "8px"
|
||||
}}
|
||||
>Личный кабинет</Button>
|
||||
</SectionWrapper>
|
||||
);
|
||||
}
|
||||
0
src/components/PenaLogo.tsx
Normal file → Executable file
0
src/components/PenaLogo.tsx
Normal file → Executable file
0
src/components/QuizCard.tsx
Normal file → Executable file
0
src/components/QuizCard.tsx
Normal file → Executable file
0
src/components/QuizGallery.tsx
Normal file → Executable file
0
src/components/QuizGallery.tsx
Normal file → Executable file
0
src/components/QuizTemplateCard.tsx
Normal file → Executable file
0
src/components/QuizTemplateCard.tsx
Normal file → Executable file
196
src/components/ResultListForm.tsx
Normal file
196
src/components/ResultListForm.tsx
Normal file
@ -0,0 +1,196 @@
|
||||
import { Box, IconButton, TextField, Typography } from "@mui/material";
|
||||
import { SelectIconButton } from "../pages/Questions/OptionsPicture/settingOpytionsPict";
|
||||
import { useState } from "react";
|
||||
|
||||
import FormatIcon2 from "@icons/questionsPage/FormatIcon2";
|
||||
import FormatIcon1 from "@icons/questionsPage/FormatIcon1";
|
||||
import Info from "@icons/Info";
|
||||
import ProportionsIcon21 from "@icons/questionsPage/ProportionsIcon21";
|
||||
import ProportionsIcon11 from "@icons/questionsPage/ProportionsIcon11";
|
||||
import ProportionsIcon12 from "@icons/questionsPage/ProportionsIcon12";
|
||||
|
||||
export const ResultListForm = () => {
|
||||
const [alignType, setAlignType] = useState<"left" | "right">("left");
|
||||
const [proportions, setProportions] = useState<"oneOne" | "twoOne" | "oneTwo">("oneOne");
|
||||
return (
|
||||
<Box sx={{ width: "796px", mb: "30px" }}>
|
||||
<Box
|
||||
sx={{
|
||||
height: "100%",
|
||||
bgcolor: "#FFFFFF",
|
||||
borderRadius: "12px",
|
||||
p: "30px 20px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
mb: "20px",
|
||||
}}
|
||||
>
|
||||
<Typography sx={{ color: "#9A9AAF" }}>Показывать результат</Typography>
|
||||
<IconButton>
|
||||
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="30" height="30" rx="6" fill="#EEE4FC" />
|
||||
<path
|
||||
d="M22.5 11.25L15 18.75L7.5 11.25"
|
||||
stroke="#7E2AEA"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</IconButton>
|
||||
</Box>
|
||||
<Box sx={{ display: "flex" }}>
|
||||
<Box>
|
||||
<Typography sx={{ mb: "14px" }}>Форма</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
gap: "10px",
|
||||
marginBottom: "20px",
|
||||
}}
|
||||
>
|
||||
<SelectIconButton
|
||||
onClick={() => setAlignType("left")}
|
||||
isActive={alignType === "left"}
|
||||
Icon={FormatIcon2}
|
||||
/>
|
||||
<SelectIconButton
|
||||
onClick={() => setAlignType("right")}
|
||||
isActive={alignType === "right"}
|
||||
Icon={FormatIcon1}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ ml: "40px" }}>
|
||||
<Typography sx={{ mb: "14px" }}>Пропорции</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
gap: "10px",
|
||||
marginBottom: "20px",
|
||||
}}
|
||||
>
|
||||
<SelectIconButton
|
||||
onClick={() => setProportions("oneOne")}
|
||||
isActive={proportions === "oneOne"}
|
||||
Icon={ProportionsIcon11}
|
||||
/>
|
||||
<SelectIconButton
|
||||
onClick={() => setProportions("twoOne")}
|
||||
isActive={proportions === "twoOne"}
|
||||
Icon={ProportionsIcon21}
|
||||
/>
|
||||
<SelectIconButton
|
||||
onClick={() => setProportions("oneTwo")}
|
||||
isActive={proportions === "oneTwo"}
|
||||
Icon={ProportionsIcon12}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ mb: "20px" }}>
|
||||
<Typography sx={{ pb: "14px" }} component="p">
|
||||
Заголовок
|
||||
</Typography>
|
||||
<TextField
|
||||
placeholder="Ваши результаты"
|
||||
fullWidth
|
||||
sx={{
|
||||
alignItems: "center",
|
||||
"& .MuiInputBase-root": {
|
||||
backgroundColor: "#F2F3F7",
|
||||
width: "100%",
|
||||
height: "48px",
|
||||
borderRadius: "10px",
|
||||
},
|
||||
}}
|
||||
inputProps={{
|
||||
sx: {
|
||||
borderRadius: "10px",
|
||||
fontSize: "18px",
|
||||
lineHeight: "21px",
|
||||
py: 0,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
<Box sx={{ mb: "20px" }}>
|
||||
<Typography sx={{ pb: "14px" }} component="p">
|
||||
Текст
|
||||
</Typography>
|
||||
<TextField
|
||||
placeholder="Ваши результаты"
|
||||
fullWidth
|
||||
sx={{
|
||||
alignItems: "center",
|
||||
"& .MuiInputBase-root": {
|
||||
backgroundColor: "#F2F3F7",
|
||||
width: "100%",
|
||||
height: "69px",
|
||||
borderRadius: "10px",
|
||||
},
|
||||
}}
|
||||
inputProps={{
|
||||
sx: {
|
||||
borderRadius: "10px",
|
||||
fontSize: "18px",
|
||||
lineHeight: "21px",
|
||||
py: 0,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography sx={{ pb: "14px" }} component="p">
|
||||
Кнопка на результате
|
||||
</Typography>
|
||||
<TextField
|
||||
placeholder="Ваши результаты"
|
||||
fullWidth
|
||||
sx={{
|
||||
alignItems: "center",
|
||||
"& .MuiInputBase-root": {
|
||||
backgroundColor: "#F2F3F7",
|
||||
width: "100%",
|
||||
height: "48px",
|
||||
borderRadius: "10px",
|
||||
},
|
||||
}}
|
||||
inputProps={{
|
||||
sx: {
|
||||
borderRadius: "10px",
|
||||
fontSize: "18px",
|
||||
lineHeight: "21px",
|
||||
py: 0,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
<Box sx={{ mt: "20px", display: "flex", alignItems: "center" }}>
|
||||
<IconButton sx={{ width: "26px", height: "26px", bgcolor: "#7E2AEA", borderRadius: "6px" }}>
|
||||
<svg width="18" height="13" viewBox="0 0 18 13" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M16.75 1L6.25 11.5L1 6.25"
|
||||
stroke="white"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</IconButton>
|
||||
<Typography sx={{ color: "#9A9AAF", p: "0 13px" }} component="p">
|
||||
Кнопка "Не знаю, что выбрать"
|
||||
</Typography>
|
||||
<Info />
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
0
src/components/SectionWrapper.tsx
Normal file → Executable file
0
src/components/SectionWrapper.tsx
Normal file → Executable file
131
src/components/SettingForm.tsx
Normal file
131
src/components/SettingForm.tsx
Normal file
@ -0,0 +1,131 @@
|
||||
import { useState } from "react";
|
||||
import { Box, Button, IconButton, SxProps, Theme, Typography } from "@mui/material";
|
||||
|
||||
import CustomButton from "./CustomButton";
|
||||
import { SwitchSetting } from "./SwichResult";
|
||||
|
||||
import Info from "@icons/Info";
|
||||
|
||||
import listChecks from "../assets/icon/listChecks.svg";
|
||||
import ShareNetwork from "../assets/icon/ShareNetwork.svg";
|
||||
import ArrowCounterClockWise from "../assets/icon/ArrowCounterClockWise.svg";
|
||||
|
||||
const buttonSetting: { title: string; sx: SxProps<Theme>; type: string }[] = [
|
||||
{
|
||||
sx: { backgroundColor: "#7E2AEA", color: "white", width: "237px", height: "44px", border: "1px solid #9A9AAF" },
|
||||
title: "До формы контактов",
|
||||
type: "toContactForm",
|
||||
},
|
||||
{
|
||||
sx: { backgroundColor: "#F2F3F7", color: "#9A9AAF", width: "266px", height: "44px", border: "1px solid #9A9AAF" },
|
||||
title: "После формы контактов",
|
||||
type: "afterСontactForm",
|
||||
},
|
||||
{
|
||||
sx: { color: "#9A9AAF", backgroundColor: "#F2F3F7", width: "233px", height: "44px", border: "1px solid #9A9AAF" },
|
||||
title: "Отправить на E-mail",
|
||||
type: "e-mail",
|
||||
},
|
||||
];
|
||||
|
||||
export const SettingForm = () => {
|
||||
const [activeIndex, setActiveIndex] = useState<number>();
|
||||
const [typeActive, setTypeActive] = useState<string>();
|
||||
|
||||
const active = (index: number, type: string) => {
|
||||
setActiveIndex(index);
|
||||
setTypeActive(type);
|
||||
};
|
||||
|
||||
return (
|
||||
<Box component="section" sx={{ width: "796px" }}>
|
||||
<Box sx={{ display: "flex", alignItems: "center", mb: "40px" }}>
|
||||
<Typography sx={{ pr: "10px" }} variant="h5">
|
||||
Настройки результатов
|
||||
</Typography>
|
||||
<Info />
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
height: "100%",
|
||||
bgcolor: "#FFFFFF",
|
||||
borderRadius: "12px",
|
||||
p: "30px 20px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
mb: "20px",
|
||||
}}
|
||||
>
|
||||
<Typography component="p" sx={{ color: "#9A9AAF" }}>
|
||||
Показывать результат
|
||||
</Typography>
|
||||
<IconButton>
|
||||
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="30" height="30" rx="6" fill="#EEE4FC" />
|
||||
<path
|
||||
d="M22.5 11.25L15 18.75L7.5 11.25"
|
||||
stroke="#7E2AEA"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</IconButton>
|
||||
</Box>
|
||||
<Box sx={{ display: "flex", justifyContent: "space-between", mb: "20px" }}>
|
||||
{buttonSetting.map(({ sx, title, type }, index) => (
|
||||
<CustomButton
|
||||
disableRipple
|
||||
onClick={() => active(index, type)}
|
||||
key={title}
|
||||
sx={{
|
||||
...sx,
|
||||
bgcolor: activeIndex === index ? " #7E2AEA" : "#F2F3F7",
|
||||
color: activeIndex === index ? " white" : "#9A9AAF",
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</CustomButton>
|
||||
))}
|
||||
</Box>
|
||||
{typeActive === "e-mail" ? (
|
||||
<SwitchSetting icon={listChecks} text="Показывать несколько результатов" />
|
||||
) : (
|
||||
<>
|
||||
<SwitchSetting icon={listChecks} text="Показывать несколько результатов" />
|
||||
<SwitchSetting icon={ShareNetwork} text="Поделиться результатами" />
|
||||
<SwitchSetting icon={ArrowCounterClockWise} text="Кнопка `Пройти тест заново`" />
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
<Box sx={{ display: "flex", alignItems: "center", mb: "15px", mt: "15px" }}>
|
||||
<Typography variant="p1" sx={{ color: "#4D4D4D", fontSize: "14px" }}>
|
||||
Создайте результат
|
||||
</Typography>
|
||||
<Button
|
||||
disableRipple
|
||||
sx={{
|
||||
ml: "auto",
|
||||
height: "19px",
|
||||
color: "#7E2AEA",
|
||||
textDecoration: "underline",
|
||||
fontSize: "16px",
|
||||
|
||||
"&:hover": {
|
||||
background: "none",
|
||||
textDecoration: "underline",
|
||||
},
|
||||
}}
|
||||
variant="text"
|
||||
>
|
||||
Свернуть всё
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
44
src/components/SwichResult.tsx
Normal file
44
src/components/SwichResult.tsx
Normal file
@ -0,0 +1,44 @@
|
||||
import { Box, IconButton, Typography } from "@mui/material";
|
||||
import { useState } from "react";
|
||||
|
||||
type Props = {
|
||||
text: string;
|
||||
icon: any;
|
||||
};
|
||||
export const SwitchSetting = ({ text, icon }: Props) => {
|
||||
const [active, setActive] = useState<boolean>(false);
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
p: "14px",
|
||||
mb: "14px",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
border: "1px solid #9A9AAF",
|
||||
borderRadius: "8px",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: "flex", alignItems: "center", justifyContent: "left" }}>
|
||||
<img src={icon} alt="icon" />
|
||||
<Typography sx={{ color: "#9A9AAF", ml: "14px" }}>{text}</Typography>
|
||||
</Box>
|
||||
|
||||
<IconButton disableRipple onClick={() => setActive(!active)}>
|
||||
<svg width="52" height="30" viewBox="0 0 52 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="52" height="30" rx="15" fill={active ? "#7E2AEA" : "#9A9AAF"} />
|
||||
<rect
|
||||
x={active ? "23" : "1"}
|
||||
y="1"
|
||||
width="28"
|
||||
height="28"
|
||||
rx="14"
|
||||
fill="white"
|
||||
stroke={active ? "#7E2AEA" : "#9A9AAF"}
|
||||
stroke-width="2"
|
||||
/>
|
||||
</svg>
|
||||
</IconButton>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
0
src/components/icons/AlignLeftIcon.tsx
Normal file → Executable file
0
src/components/icons/AlignLeftIcon.tsx
Normal file → Executable file
0
src/components/icons/AlignRightIcon.tsx
Normal file → Executable file
0
src/components/icons/AlignRightIcon.tsx
Normal file → Executable file
0
src/components/icons/ArrowDownIcon.tsx
Normal file → Executable file
0
src/components/icons/ArrowDownIcon.tsx
Normal file → Executable file
0
src/components/icons/BackArrowIcon.tsx
Normal file → Executable file
0
src/components/icons/BackArrowIcon.tsx
Normal file → Executable file
0
src/components/icons/ChartIcon.tsx
Normal file → Executable file
0
src/components/icons/ChartIcon.tsx
Normal file → Executable file
0
src/components/icons/ChartPieIcon.tsx
Normal file → Executable file
0
src/components/icons/ChartPieIcon.tsx
Normal file → Executable file
0
src/components/icons/CollapseMenuIcon.tsx
Normal file → Executable file
0
src/components/icons/CollapseMenuIcon.tsx
Normal file → Executable file
0
src/components/icons/ContactBookIcon.tsx
Normal file → Executable file
0
src/components/icons/ContactBookIcon.tsx
Normal file → Executable file
25
src/components/icons/ContactFormIcon/AddressIcon.tsx
Normal file
25
src/components/icons/ContactFormIcon/AddressIcon.tsx
Normal file
@ -0,0 +1,25 @@
|
||||
import { Box } from "@mui/material";
|
||||
|
||||
interface Props {
|
||||
color: string;
|
||||
}
|
||||
|
||||
export default function AddressIcon({color}: Props) {
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
// height: "38px",
|
||||
// width: "45px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.5 7.96875C8.53553 7.96875 9.375 7.12928 9.375 6.09375C9.375 5.05822 8.53553 4.21875 7.5 4.21875C6.46447 4.21875 5.625 5.05822 5.625 6.09375C5.625 7.12928 6.46447 7.96875 7.5 7.96875Z" stroke={color} stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M12.1875 6.09375C12.1875 10.3125 7.5 13.5938 7.5 13.5938C7.5 13.5938 2.8125 10.3125 2.8125 6.09375C2.8125 4.85055 3.30636 3.65826 4.18544 2.77919C5.06451 1.90011 6.2568 1.40625 7.5 1.40625C8.7432 1.40625 9.93549 1.90011 10.8146 2.77919C11.6936 3.65826 12.1875 4.85055 12.1875 6.09375V6.09375Z" stroke={color} stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
26
src/components/icons/ContactFormIcon/EmailIcon.tsx
Normal file
26
src/components/icons/ContactFormIcon/EmailIcon.tsx
Normal file
@ -0,0 +1,26 @@
|
||||
import { Box } from "@mui/material";
|
||||
|
||||
interface Props {
|
||||
color: string;
|
||||
}
|
||||
|
||||
export default function EmailIcon({color}: Props) {
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
// height: "38px",
|
||||
// width: "45px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1.875 3.28125H13.125V11.25C13.125 11.3743 13.0756 11.4935 12.9877 11.5815C12.8998 11.6694 12.7806 11.7188 12.6562 11.7188H2.34375C2.21943 11.7188 2.1002 11.6694 2.01229 11.5815C1.92439 11.4935 1.875 11.3743 1.875 11.25V3.28125Z" stroke={color} stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M13.125 3.28125L7.5 8.4375L1.875 3.28125" stroke={color} stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
27
src/components/icons/ContactFormIcon/NameIcon.tsx
Normal file
27
src/components/icons/ContactFormIcon/NameIcon.tsx
Normal file
@ -0,0 +1,27 @@
|
||||
import { Box } from "@mui/material";
|
||||
|
||||
interface Props {
|
||||
color: string;
|
||||
}
|
||||
|
||||
export default function NameIcon({color}: Props) {
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
// height: "38px",
|
||||
// width: "45px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6.5 8.375C8.57107 8.375 10.25 6.69607 10.25 4.625C10.25 2.55393 8.57107 0.875 6.5 0.875C4.42893 0.875 2.75 2.55393 2.75 4.625C2.75 6.69607 4.42893 8.375 6.5 8.375Z" stroke={color} stroke-miterlimit="10"/>
|
||||
<path d="M0.8125 11.6568C1.38844 10.659 2.21689 9.83044 3.21458 9.25436C4.21227 8.67828 5.34403 8.375 6.49609 8.375C7.64816 8.375 8.77992 8.67828 9.77761 9.25436C10.7753 9.83044 11.6037 10.659 12.1797 11.6568" stroke={color} stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M0.765625 11.6914H11.9866" stroke={color} stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
25
src/components/icons/ContactFormIcon/PhoneIcon.tsx
Normal file
25
src/components/icons/ContactFormIcon/PhoneIcon.tsx
Normal file
@ -0,0 +1,25 @@
|
||||
import { Box } from "@mui/material";
|
||||
|
||||
interface Props {
|
||||
color: string;
|
||||
}
|
||||
|
||||
export default function PhoneIcon({color}: Props) {
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
// height: "38px",
|
||||
// width: "45px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.41992 7.31237C5.90228 8.30847 6.70774 9.11187 7.70508 9.59166C7.77865 9.6265 7.86002 9.64157 7.94118 9.63541C8.02235 9.62925 8.10051 9.60205 8.16797 9.55651L9.63281 8.57799C9.69753 8.5341 9.77232 8.50731 9.85019 8.50014C9.92806 8.49297 10.0065 8.50564 10.0781 8.53698L12.8203 9.71471C12.914 9.75372 12.9923 9.82245 13.0432 9.91033C13.094 9.9982 13.1145 10.1004 13.1016 10.201C13.0146 10.8794 12.6835 11.5029 12.1702 11.9547C11.6568 12.4066 10.9964 12.656 10.3125 12.6561C8.19906 12.6561 6.17217 11.8166 4.67774 10.3221C3.18331 8.82769 2.34375 6.80081 2.34375 4.68737C2.3439 4.00346 2.59325 3.34304 3.04513 2.82968C3.49701 2.31633 4.12047 1.98522 4.79883 1.8983C4.89951 1.88537 5.00166 1.90589 5.08954 1.95671C5.17741 2.00754 5.24615 2.08583 5.28516 2.17955L6.46289 4.9276C6.49352 4.99812 6.50633 5.07508 6.5002 5.15172C6.49407 5.22835 6.46918 5.3023 6.42773 5.36705L5.44922 6.85534C5.40565 6.92265 5.38009 7.00001 5.37496 7.08003C5.36983 7.16005 5.38531 7.24004 5.41992 7.31237V7.31237Z" stroke={color} stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
30
src/components/icons/ContactFormIcon/TextIcon.tsx
Normal file
30
src/components/icons/ContactFormIcon/TextIcon.tsx
Normal file
@ -0,0 +1,30 @@
|
||||
import { Box } from "@mui/material";
|
||||
|
||||
interface Props {
|
||||
color: string;
|
||||
}
|
||||
|
||||
export default function TextIcon({color}: Props) {
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
// height: "38px",
|
||||
// width: "45px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8.67188 1.60156L8.67188 13.3838" stroke={color} stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M10.6016 4.21875H13.7768C13.8534 4.21875 13.9268 4.26814 13.9809 4.35604C14.035 4.44395 14.0655 4.56318 14.0655 4.6875V10.3125C14.0655 10.4368 14.035 10.556 13.9809 10.644C13.9268 10.7319 13.8534 10.7812 13.7768 10.7812H10.6016" stroke={color} stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M8.67081 10.7812H1.58194C1.41103 10.7812 1.24711 10.7319 1.12625 10.644C1.0054 10.556 0.9375 10.4368 0.9375 10.3125V4.6875C0.9375 4.56318 1.0054 4.44395 1.12625 4.35604C1.24711 4.26814 1.41103 4.21875 1.58194 4.21875H8.67081" stroke={color} stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M3.98438 6.5625H5.625" stroke={color} stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M7.85156 1.60156H9.49219" stroke={color} stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M7.85156 13.3828H9.49219" stroke={color} stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M4.80469 6.5625V8.67188" stroke={color} stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
25
src/components/icons/ContactFormIcon/supplementIcon.tsx
Normal file
25
src/components/icons/ContactFormIcon/supplementIcon.tsx
Normal file
@ -0,0 +1,25 @@
|
||||
import { Box } from "@mui/material";
|
||||
|
||||
interface Props {
|
||||
color: string;
|
||||
}
|
||||
|
||||
export default function SupplementIcon({color}: Props) {
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
// height: "38px",
|
||||
// width: "45px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.00781 4.04129V9.99117M10.0548 7H4.00202M7.00781 13C3.6941 13 1.00781 10.3137 1.00781 7C1.00781 3.68629 3.6941 1 7.00781 1C10.3215 1 13.0078 3.68629 13.0078 7C13.0078 10.3137 10.3215 13 7.00781 13Z" stroke={color} stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
20
src/components/icons/CopyIcon.tsx
Normal file
20
src/components/icons/CopyIcon.tsx
Normal file
@ -0,0 +1,20 @@
|
||||
export default function CopyIcon() {
|
||||
return (
|
||||
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M15.75 16.5625H20.25V4.5625H8.25V9.0625"
|
||||
stroke="white"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M15.75 9.0625H3.75V21.0625H15.75V9.0625Z"
|
||||
stroke="white"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
11
src/components/icons/CountIcon.tsx
Normal file
11
src/components/icons/CountIcon.tsx
Normal file
@ -0,0 +1,11 @@
|
||||
export default function CountIcon() {
|
||||
return (
|
||||
<svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect y="0.8125" width="30" height="30" rx="15" fill="#EEE4FC" />
|
||||
<path
|
||||
d="M15.864 20.3125C15.7707 20.3125 15.6913 20.2845 15.626 20.2285C15.57 20.1632 15.542 20.0838 15.542 19.9905V12.1505L13.218 13.9425C13.1433 13.9985 13.064 14.0218 12.98 14.0125C12.896 14.0032 12.826 13.9612 12.77 13.8865L12.406 13.4245C12.35 13.3405 12.3267 13.2565 12.336 13.1725C12.3547 13.0885 12.4013 13.0185 12.476 12.9625L15.528 10.6105C15.5933 10.5638 15.654 10.5358 15.71 10.5265C15.766 10.5172 15.8267 10.5125 15.892 10.5125H16.606C16.6993 10.5125 16.774 10.5452 16.83 10.6105C16.886 10.6665 16.914 10.7412 16.914 10.8345V19.9905C16.914 20.0838 16.886 20.1632 16.83 20.2285C16.774 20.2845 16.6993 20.3125 16.606 20.3125H15.864Z"
|
||||
fill="#7E2AEA"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
42
src/components/icons/CrossedEyeIcon.tsx
Normal file
42
src/components/icons/CrossedEyeIcon.tsx
Normal file
@ -0,0 +1,42 @@
|
||||
export default function CrossedEyeIcon() {
|
||||
return (
|
||||
<svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect y="0.8125" width="30" height="30" rx="6" fill="#252734" />
|
||||
<path
|
||||
d="M7.5 7.5625L22.5 24.0625"
|
||||
stroke="#7E2AEA"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M17.5215 18.5871C16.8333 19.2175 15.9329 19.5657 14.9996 19.5621C14.2427 19.562 13.5036 19.3329 12.8794 18.9049C12.2551 18.4769 11.775 17.87 11.5022 17.164C11.2293 16.458 11.1765 15.686 11.3506 14.9494C11.5247 14.2128 11.9176 13.5462 12.4777 13.0371"
|
||||
stroke="#7E2AEA"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M9.9375 10.2441C6.1125 12.1754 4.5 15.8129 4.5 15.8129C4.5 15.8129 7.5 22.5629 15 22.5629C16.7574 22.5772 18.4929 22.1723 20.0625 21.3816"
|
||||
stroke="#7E2AEA"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M22.5594 19.6656C24.6031 17.8375 25.5031 15.8125 25.5031 15.8125C25.5031 15.8125 22.5031 9.06252 15.0031 9.06252C14.3529 9.06124 13.7038 9.11455 13.0625 9.2219"
|
||||
stroke="#7E2AEA"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M15.7031 12.1289C16.5006 12.28 17.2273 12.6864 17.7735 13.2868C18.3198 13.8871 18.6559 14.6489 18.7313 15.457"
|
||||
stroke="#7E2AEA"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
0
src/components/icons/ExpandIcon.tsx
Normal file → Executable file
0
src/components/icons/ExpandIcon.tsx
Normal file → Executable file
0
src/components/icons/EyeIcon.tsx
Normal file → Executable file
0
src/components/icons/EyeIcon.tsx
Normal file → Executable file
0
src/components/icons/FlowArrowIcon.tsx
Normal file → Executable file
0
src/components/icons/FlowArrowIcon.tsx
Normal file → Executable file
0
src/components/icons/GearIcon.tsx
Normal file → Executable file
0
src/components/icons/GearIcon.tsx
Normal file → Executable file
16
src/components/icons/IconPlus.tsx
Normal file
16
src/components/icons/IconPlus.tsx
Normal file
@ -0,0 +1,16 @@
|
||||
import { IconButton } from "@mui/material";
|
||||
|
||||
export default function IconPlus() {
|
||||
return (
|
||||
<IconButton>
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M18 0H6C2.68629 0 0 2.68629 0 6V18C0 21.3137 2.68629 24 6 24H18C21.3137 24 24 21.3137 24 18V6C24 2.68629 21.3137 0 18 0Z"
|
||||
fill="#7E2AEA"
|
||||
/>
|
||||
<path d="M3.75 12H20.25" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M12 3.75V20.25" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
</IconButton>
|
||||
);
|
||||
}
|
||||
28
src/components/icons/Info.tsx
Normal file
28
src/components/icons/Info.tsx
Normal file
@ -0,0 +1,28 @@
|
||||
import { IconButton } from "@mui/material";
|
||||
|
||||
export default function Info() {
|
||||
return (
|
||||
<IconButton>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M10 19C14.9706 19 19 14.9706 19 10C19 5.02944 14.9706 1 10 1C5.02944 1 1 5.02944 1 10C1 14.9706 5.02944 19 10 19Z"
|
||||
stroke="#7E2AEA"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M9.25 9.25H10V14.5H10.75"
|
||||
stroke="#7E2AEA"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M9.8125 7C10.4338 7 10.9375 6.49632 10.9375 5.875C10.9375 5.25368 10.4338 4.75 9.8125 4.75C9.19118 4.75 8.6875 5.25368 8.6875 5.875C8.6875 6.49632 9.19118 7 9.8125 7Z"
|
||||
fill="#7E2AEA"
|
||||
/>
|
||||
</svg>
|
||||
</IconButton>
|
||||
);
|
||||
}
|
||||
0
src/components/icons/InfoIcon.tsx
Normal file → Executable file
0
src/components/icons/InfoIcon.tsx
Normal file → Executable file
0
src/components/icons/LayoutCenteredIcon.tsx
Normal file → Executable file
0
src/components/icons/LayoutCenteredIcon.tsx
Normal file → Executable file
0
src/components/icons/LayoutExpandedIcon.tsx
Normal file → Executable file
0
src/components/icons/LayoutExpandedIcon.tsx
Normal file → Executable file
0
src/components/icons/LayoutIcon.tsx
Normal file → Executable file
0
src/components/icons/LayoutIcon.tsx
Normal file → Executable file
0
src/components/icons/LayoutIconBig.tsx
Normal file → Executable file
0
src/components/icons/LayoutIconBig.tsx
Normal file → Executable file
0
src/components/icons/LayoutStandartIcon.tsx
Normal file → Executable file
0
src/components/icons/LayoutStandartIcon.tsx
Normal file → Executable file
0
src/components/icons/LinkIcon.tsx
Normal file → Executable file
0
src/components/icons/LinkIcon.tsx
Normal file → Executable file
0
src/components/icons/LogoutIcon.tsx
Normal file → Executable file
0
src/components/icons/LogoutIcon.tsx
Normal file → Executable file
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user