svg - react components
This commit is contained in:
Tatiana Nikolaeva
parent
122f14adf7
commit
fd8273a2fe
25 changed files with 488 additions and 65 deletions
3
SurveyFrontend/src/assets/account.svg
Normal file
3
SurveyFrontend/src/assets/account.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12.675 37.05C14.5167 35.6417 16.575 34.5312 18.85 33.7188C21.125 32.9062 23.5084 32.5 26 32.5C28.4917 32.5 30.875 32.9062 33.15 33.7188C35.425 34.5312 37.4834 35.6417 39.325 37.05C40.5889 35.5694 41.573 33.8903 42.2771 32.0125C42.9813 30.1347 43.3334 28.1306 43.3334 26C43.3334 21.1972 41.6452 17.1076 38.2688 13.7312C34.8924 10.3549 30.8028 8.66667 26 8.66667C21.1973 8.66667 17.1077 10.3549 13.7313 13.7312C10.3549 17.1076 8.66671 21.1972 8.66671 26C8.66671 28.1306 9.01879 30.1347 9.72296 32.0125C10.4271 33.8903 11.4112 35.5694 12.675 37.05ZM26 28.1667C23.8695 28.1667 22.073 27.4354 20.6105 25.9729C19.148 24.5104 18.4167 22.7139 18.4167 20.5833C18.4167 18.4528 19.148 16.6562 20.6105 15.1937C22.073 13.7312 23.8695 13 26 13C28.1306 13 29.9271 13.7312 31.3896 15.1937C32.8521 16.6562 33.5834 18.4528 33.5834 20.5833C33.5834 22.7139 32.8521 24.5104 31.3896 25.9729C29.9271 27.4354 28.1306 28.1667 26 28.1667ZM26 47.6667C23.0028 47.6667 20.1862 47.0979 17.55 45.9604C14.9139 44.8229 12.6209 43.2792 10.6709 41.3292C8.72087 39.3792 7.17712 37.0861 6.03962 34.45C4.90212 31.8139 4.33337 28.9972 4.33337 26C4.33337 23.0028 4.90212 20.1861 6.03962 17.55C7.17712 14.9139 8.72087 12.6208 10.6709 10.6708C12.6209 8.72083 14.9139 7.17708 17.55 6.03958C20.1862 4.90208 23.0028 4.33333 26 4.33333C28.9973 4.33333 31.8139 4.90208 34.45 6.03958C37.0862 7.17708 39.3792 8.72083 41.3292 10.6708C43.2792 12.6208 44.823 14.9139 45.9605 17.55C47.098 20.1861 47.6667 23.0028 47.6667 26C47.6667 28.9972 47.098 31.8139 45.9605 34.45C44.823 37.0861 43.2792 39.3792 41.3292 41.3292C39.3792 43.2792 37.0862 44.8229 34.45 45.9604C31.8139 47.0979 28.9973 47.6667 26 47.6667Z" fill="#79747E"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
4
SurveyFrontend/src/assets/add_answer.svg
Normal file
4
SurveyFrontend/src/assets/add_answer.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.1579 1.5V14.5" stroke="#3788D6" stroke-width="2" stroke-linecap="round"/>
|
||||
<path d="M14 8L1 8" stroke="#3788D6" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 268 B |
3
SurveyFrontend/src/assets/add_circle.svg
Normal file
3
SurveyFrontend/src/assets/add_circle.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="28" height="29" viewBox="0 0 28 29" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12.8334 20.3333H15.1667V15.6667H19.8334V13.3333H15.1667V8.66668H12.8334V13.3333H8.16671V15.6667H12.8334V20.3333ZM14 26.1667C12.3862 26.1667 10.8695 25.8653 9.45004 25.2625C8.0306 24.6403 6.79587 23.8042 5.74587 22.7542C4.69587 21.7042 3.85976 20.4695 3.23754 19.05C2.63476 17.6306 2.33337 16.1139 2.33337 14.5C2.33337 12.8861 2.63476 11.3695 3.23754 9.95001C3.85976 8.53057 4.69587 7.29584 5.74587 6.24584C6.79587 5.19584 8.0306 4.36945 9.45004 3.76668C10.8695 3.14445 12.3862 2.83334 14 2.83334C15.6139 2.83334 17.1306 3.14445 18.55 3.76668C19.9695 4.36945 21.2042 5.19584 22.2542 6.24584C23.3042 7.29584 24.1306 8.53057 24.7334 9.95001C25.3556 11.3695 25.6667 12.8861 25.6667 14.5C25.6667 16.1139 25.3556 17.6306 24.7334 19.05C24.1306 20.4695 23.3042 21.7042 22.2542 22.7542C21.2042 23.8042 19.9695 24.6403 18.55 25.2625C17.1306 25.8653 15.6139 26.1667 14 26.1667ZM14 23.8333C16.6056 23.8333 18.8125 22.9292 20.6209 21.1208C22.4292 19.3125 23.3334 17.1056 23.3334 14.5C23.3334 11.8945 22.4292 9.68751 20.6209 7.87918C18.8125 6.07084 16.6056 5.16668 14 5.16668C11.3945 5.16668 9.18754 6.07084 7.37921 7.87918C5.57087 9.68751 4.66671 11.8945 4.66671 14.5C4.66671 17.1056 5.57087 19.3125 7.37921 21.1208C9.18754 22.9292 11.3945 23.8333 14 23.8333Z" fill="#7D7983"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
21
SurveyFrontend/src/assets/add_question.svg
Normal file
21
SurveyFrontend/src/assets/add_question.svg
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
<svg width="91" height="90" viewBox="0 0 91 90" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_d_3_6)">
|
||||
<circle cx="45.5" cy="45" r="27" fill="#3788D6"/>
|
||||
</g>
|
||||
<path d="M45.5 26V64" stroke="white" stroke-width="2" stroke-linecap="round"/>
|
||||
<path d="M65.5 45L27.5 45" stroke="white" stroke-width="2" stroke-linecap="round"/>
|
||||
<path d="M45.5 26V64" stroke="white" stroke-width="2" stroke-linecap="round"/>
|
||||
<path d="M65.5 45L27.5 45" stroke="white" stroke-width="2" stroke-linecap="round"/>
|
||||
<defs>
|
||||
<filter id="filter0_d_3_6" x="0.6" y="0.1" width="89.8" height="89.8" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset/>
|
||||
<feGaussianBlur stdDeviation="8.95"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.310533 0 0 0 0 0.630263 0 0 0 0 0.938151 0 0 0 1 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3_6"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3_6" result="shape"/>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
3
SurveyFrontend/src/assets/arrow_drop_down.svg
Normal file
3
SurveyFrontend/src/assets/arrow_drop_down.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 15L7 10H17L12 15Z" fill="#1D1B20"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 152 B |
3
SurveyFrontend/src/assets/arrow_drop_up.svg
Normal file
3
SurveyFrontend/src/assets/arrow_drop_up.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7 14L12 9L17 14H7Z" fill="#1D1B20"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 150 B |
3
SurveyFrontend/src/assets/check_box.svg
Normal file
3
SurveyFrontend/src/assets/check_box.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.06667 10.8L11.7667 6.1L10.8333 5.16667L7.06667 8.93333L5.16667 7.03333L4.23333 7.96667L7.06667 10.8ZM3.33333 14C2.96667 14 2.65278 13.8694 2.39167 13.6083C2.13056 13.3472 2 13.0333 2 12.6667V3.33333C2 2.96667 2.13056 2.65278 2.39167 2.39167C2.65278 2.13056 2.96667 2 3.33333 2H12.6667C13.0333 2 13.3472 2.13056 13.6083 2.39167C13.8694 2.65278 14 2.96667 14 3.33333V12.6667C14 13.0333 13.8694 13.3472 13.6083 13.6083C13.3472 13.8694 13.0333 14 12.6667 14H3.33333Z" fill="#1D1B20"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 596 B |
3
SurveyFrontend/src/assets/delete.svg
Normal file
3
SurveyFrontend/src/assets/delete.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7 21C6.45 21 5.97917 20.8042 5.5875 20.4125C5.19583 20.0208 5 19.55 5 19V6H4V4H9V3H15V4H20V6H19V19C19 19.55 18.8042 20.0208 18.4125 20.4125C18.0208 20.8042 17.55 21 17 21H7ZM17 6H7V19H17V6ZM9 17H11V8H9V17ZM13 17H15V8H13V17Z" fill="#1D1B20"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 355 B |
3
SurveyFrontend/src/assets/deleteQuestion.svg
Normal file
3
SurveyFrontend/src/assets/deleteQuestion.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7 21C6.45 21 5.97917 20.8042 5.5875 20.4125C5.19583 20.0208 5 19.55 5 19V6H4V4H9V3H15V4H20V6H19V19C19 19.55 18.8042 20.0208 18.4125 20.4125C18.0208 20.8042 17.55 21 17 21H7ZM17 6H7V19H17V6ZM9 17H11V8H9V17ZM13 17H15V8H13V17Z" fill="#EC221F"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 355 B |
10
SurveyFrontend/src/assets/emptyCheckbox.svg
Normal file
10
SurveyFrontend/src/assets/emptyCheckbox.svg
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_9_43)">
|
||||
<path d="M21.8986 6.46666V21.9681H6.39711V6.46666H21.8986ZM21.8986 4.25217H6.39711C5.17914 4.25217 4.18262 5.24869 4.18262 6.46666V21.9681C4.18262 23.1861 5.17914 24.1826 6.39711 24.1826H21.8986C23.1165 24.1826 24.1131 23.1861 24.1131 21.9681V6.46666C24.1131 5.24869 23.1165 4.25217 21.8986 4.25217Z" fill="#5C5C5C"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_9_43">
|
||||
<rect width="26.5739" height="26.5739" fill="white" transform="translate(0.86087 0.930435)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 607 B |
3
SurveyFrontend/src/assets/logo.svg
Normal file
3
SurveyFrontend/src/assets/logo.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle opacity="0.05" cx="26" cy="26" r="26" fill="#222222"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 166 B |
3
SurveyFrontend/src/assets/radio_button_checked.svg
Normal file
3
SurveyFrontend/src/assets/radio_button_checked.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8.00004 11.3333C8.92226 11.3333 9.70837 11.0083 10.3584 10.3583C11.0084 9.70834 11.3334 8.92223 11.3334 8.00001C11.3334 7.07779 11.0084 6.29168 10.3584 5.64168C9.70837 4.99168 8.92226 4.66668 8.00004 4.66668C7.07782 4.66668 6.29171 4.99168 5.64171 5.64168C4.99171 6.29168 4.66671 7.07779 4.66671 8.00001C4.66671 8.92223 4.99171 9.70834 5.64171 10.3583C6.29171 11.0083 7.07782 11.3333 8.00004 11.3333ZM8.00004 14.6667C7.07782 14.6667 6.21115 14.4917 5.40004 14.1417C4.58893 13.7917 3.88337 13.3167 3.28337 12.7167C2.68337 12.1167 2.20837 11.4111 1.85837 10.6C1.50837 9.7889 1.33337 8.92223 1.33337 8.00001C1.33337 7.07779 1.50837 6.21112 1.85837 5.40001C2.20837 4.5889 2.68337 3.88334 3.28337 3.28334C3.88337 2.68334 4.58893 2.20834 5.40004 1.85834C6.21115 1.50834 7.07782 1.33334 8.00004 1.33334C8.92226 1.33334 9.78893 1.50834 10.6 1.85834C11.4112 2.20834 12.1167 2.68334 12.7167 3.28334C13.3167 3.88334 13.7917 4.5889 14.1417 5.40001C14.4917 6.21112 14.6667 7.07779 14.6667 8.00001C14.6667 8.92223 14.4917 9.7889 14.1417 10.6C13.7917 11.4111 13.3167 12.1167 12.7167 12.7167C12.1167 13.3167 11.4112 13.7917 10.6 14.1417C9.78893 14.4917 8.92226 14.6667 8.00004 14.6667ZM8.00004 13.3333C9.48893 13.3333 10.75 12.8167 11.7834 11.7833C12.8167 10.75 13.3334 9.4889 13.3334 8.00001C13.3334 6.51112 12.8167 5.25001 11.7834 4.21668C10.75 3.18334 9.48893 2.66668 8.00004 2.66668C6.51115 2.66668 5.25004 3.18334 4.21671 4.21668C3.18337 5.25001 2.66671 6.51112 2.66671 8.00001C2.66671 9.4889 3.18337 10.75 4.21671 11.7833C5.25004 12.8167 6.51115 13.3333 8.00004 13.3333Z" fill="#1D1B20"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
3
SurveyFrontend/src/assets/radio_button_unchecked.svg
Normal file
3
SurveyFrontend/src/assets/radio_button_unchecked.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9.99999 18.3333C8.84721 18.3333 7.76388 18.1146 6.74999 17.6771C5.7361 17.2396 4.85416 16.6458 4.10416 15.8958C3.35416 15.1458 2.76041 14.2639 2.32291 13.25C1.88541 12.2361 1.66666 11.1528 1.66666 9.99999C1.66666 8.84721 1.88541 7.76388 2.32291 6.74999C2.76041 5.7361 3.35416 4.85416 4.10416 4.10416C4.85416 3.35416 5.7361 2.76041 6.74999 2.32291C7.76388 1.88541 8.84721 1.66666 9.99999 1.66666C11.1528 1.66666 12.2361 1.88541 13.25 2.32291C14.2639 2.76041 15.1458 3.35416 15.8958 4.10416C16.6458 4.85416 17.2396 5.7361 17.6771 6.74999C18.1146 7.76388 18.3333 8.84721 18.3333 9.99999C18.3333 11.1528 18.1146 12.2361 17.6771 13.25C17.2396 14.2639 16.6458 15.1458 15.8958 15.8958C15.1458 16.6458 14.2639 17.2396 13.25 17.6771C12.2361 18.1146 11.1528 18.3333 9.99999 18.3333ZM9.99999 16.6667C11.8611 16.6667 13.4375 16.0208 14.7292 14.7292C16.0208 13.4375 16.6667 11.8611 16.6667 9.99999C16.6667 8.13888 16.0208 6.56249 14.7292 5.27082C13.4375 3.97916 11.8611 3.33332 9.99999 3.33332C8.13888 3.33332 6.56249 3.97916 5.27082 5.27082C3.97916 6.56249 3.33332 8.13888 3.33332 9.99999C3.33332 11.8611 3.97916 13.4375 5.27082 14.7292C6.56249 16.0208 8.13888 16.6667 9.99999 16.6667Z" fill="#1D1B20"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -1,5 +1,6 @@
|
|||
import React from 'react';
|
||||
import styles from './Account.module.css'
|
||||
import AccountImg from '../../assets/account.svg?react';
|
||||
|
||||
interface AccountProps {
|
||||
href: string;
|
||||
|
|
@ -10,7 +11,7 @@ const Account: React.FC<AccountProps> = ({href, user}) => {
|
|||
return (
|
||||
<div className={styles.account}>
|
||||
<a className={styles.accountText} href={href}>
|
||||
<img src='../../../public/account.svg' className={styles.accountImg} alt='account'/>
|
||||
<AccountImg className={styles.accountImg}/>
|
||||
{user}
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import React from "react";
|
||||
import styles from './AddAnswerButton.module.css'
|
||||
import AddAnswerImg from '../../assets/add_answer.svg?react';
|
||||
|
||||
|
||||
interface AddAnswerButtonProps {
|
||||
|
|
@ -10,7 +11,7 @@ const AddAnswerButton: React.FC<AddAnswerButtonProps> = ({onClick}) => {
|
|||
return (
|
||||
<button className={styles.answerButton} onClick={onClick}>
|
||||
Добавить вариант ответа {' '}
|
||||
<img src='../../../public/add_answer.svg' className={styles.addAnswerImg} alt="add answer"/>
|
||||
<AddAnswerImg className={styles.addAnswerImg} />
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import React from "react";
|
||||
import styles from './AddQuestionButton.module.css'
|
||||
import AddQuestionImg from '../../assets/add_question.svg?react';
|
||||
|
||||
interface AddQuestionButtonProps {
|
||||
onClick: () => void;
|
||||
|
|
@ -8,7 +9,7 @@ interface AddQuestionButtonProps {
|
|||
const AddQuestionButton: React.FC<AddQuestionButtonProps> = ({onClick}) => {
|
||||
return (
|
||||
<button className={styles.questionButton} onClick={onClick}>
|
||||
<img src='../../../public/add_question.svg' className={styles.questionButtonImg} alt='add question' />
|
||||
<AddQuestionImg className={styles.questionButtonImg}/>
|
||||
<span className={styles.textButton}>Добавить вопрос</span>
|
||||
</button>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,10 +1,8 @@
|
|||
import React, {useState, useRef, useEffect} from "react";
|
||||
import styles from'./AnswerOption.module.css';
|
||||
|
||||
const single_selected_response = '../../../public/radio_button_checked.svg';
|
||||
const multiple_selected_response = '../../../public/check_box.svg';
|
||||
const single_response = '../../../public/radio_button_unchecked.svg';
|
||||
const multiple_response ='../../../public/emptyCheckbox.svg';
|
||||
import Delete from '../../assets/delete.svg?react';
|
||||
import Single from '../../assets/radio_button_unchecked.svg?react';
|
||||
import Multiple from '../../assets/emptyCheckbox.svg?react';
|
||||
|
||||
interface AnswerOptionProps{
|
||||
index: number;
|
||||
|
|
@ -12,11 +10,11 @@ interface AnswerOptionProps{
|
|||
onChange: (value: string) => void;
|
||||
onDelete:(index: number) => void;
|
||||
selectedType: 'single' | 'multiply';
|
||||
isSelected: boolean;
|
||||
// isSelected: boolean;
|
||||
toggleSelect: () => void;
|
||||
}
|
||||
|
||||
const AnswerOption: React.FC<AnswerOptionProps> = ({index, value, onChange, onDelete, selectedType, isSelected, toggleSelect}) => {
|
||||
const AnswerOption: React.FC<AnswerOptionProps> = ({index, value, onChange, onDelete, selectedType, toggleSelect}) => {
|
||||
const [currentValue, setCurrentValue] = useState(value);
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
|
||||
|
|
@ -70,25 +68,13 @@ const AnswerOption: React.FC<AnswerOptionProps> = ({index, value, onChange, onDe
|
|||
}
|
||||
}, [isEditing]);
|
||||
|
||||
const getImage = () => {
|
||||
if (selectedType === 'multiply') {
|
||||
return isSelected ? multiple_selected_response : multiple_response;
|
||||
} else {
|
||||
return isSelected ? single_selected_response : single_response;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles.answer}>
|
||||
<button
|
||||
className={`${styles.buttonMarker} ${isEditing ? styles.editing : ''}`}
|
||||
onClick={toggleSelect}
|
||||
>
|
||||
<img
|
||||
className={styles.answerIcon}
|
||||
src={getImage()}
|
||||
alt=""
|
||||
/>
|
||||
{selectedType === 'single' ? < Single className={styles.answerIcon} /> : <Multiple className={styles.answerIcon} />}
|
||||
</button>
|
||||
{isEditing ? (
|
||||
<textarea
|
||||
|
|
@ -106,7 +92,7 @@ const AnswerOption: React.FC<AnswerOptionProps> = ({index, value, onChange, onDe
|
|||
</button>
|
||||
)}
|
||||
<button className={styles.deleteButton} onClick={() => onDelete(index)}>
|
||||
<img src='../../../public/delete.svg' alt="Удалить" />
|
||||
<Delete />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import React from "react";
|
||||
import styles from './Logo.module.css'
|
||||
import LogoImg from '../../assets/logo.svg?react'
|
||||
|
||||
interface LogoProps {
|
||||
href: string;
|
||||
|
|
@ -9,7 +10,7 @@ interface LogoProps {
|
|||
const Logo: React.FC<LogoProps> = ({href, onClick}) => {
|
||||
return (
|
||||
<a className={styles.logo} href={href} onClick={onClick}>
|
||||
<img src='../../../public/logo.svg' alt="" />
|
||||
<LogoImg/>
|
||||
</a>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import AnswerOption from '../AnswerOption/AnswerOption';
|
|||
import AddAnswerButton from "../AddAnswerButton/AddAnswerButton.tsx";
|
||||
import TypeDropdown from "../TypeDropdown/TypeDropdown.tsx";
|
||||
import styles from './QuestionItem.module.css'
|
||||
import Delete from '../../assets/deleteQuestion.svg?react';
|
||||
|
||||
|
||||
interface QuestionItemProps {
|
||||
|
|
@ -145,7 +146,7 @@ const QuestionItem: React.FC<QuestionItemProps> = ({indexQuestion, initialTextQu
|
|||
/>
|
||||
<button className={styles.deleteQuestionButton} onClick={handleDeleteQuestion}>
|
||||
Удалить{/**/}
|
||||
<img className={styles.basketImg} src='../../../public/deleteQuestion.svg' alt='deleteQuestion' />
|
||||
<Delete className={styles.basketImg}/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import React, {useState, useRef, useEffect} from "react";
|
||||
import styles from './SurveyInfo.module.css'
|
||||
import AddDescripImg from '../../assets/add_circle.svg?react';
|
||||
|
||||
const SurveyInfo: React.FC = () => {
|
||||
const [descriptionSurvey, setDescriptionSurvey] = useState('');
|
||||
|
|
@ -109,7 +110,7 @@ const SurveyInfo: React.FC = () => {
|
|||
onClick={handleAddDescriptionClick}
|
||||
>
|
||||
<span className={styles.textButton}>Добавить описание</span>
|
||||
<img src='../../../public/add_circle.svg' className={styles.descButtonImg} alt='add circle'/>
|
||||
<AddDescripImg className={styles.descButtonImg}/>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,10 @@
|
|||
import React, { useState, useRef, useEffect } from "react";
|
||||
|
||||
import React, {useState, useRef, useEffect} from "react";
|
||||
import DropDown from '../../assets/arrow_drop_down.svg?react';
|
||||
import DropUp from '../../assets/arrow_drop_up.svg?react';
|
||||
import Single from '../../assets/radio_button_checked.svg?react';
|
||||
import Multiple from '../../assets/check_box.svg?react';
|
||||
import styles from './TypeDropdown.module.css'
|
||||
|
||||
const single_selected = '../../../public/radio_button_checked.svg';
|
||||
const multiple_selected = '../../../public/check_box.svg';
|
||||
|
||||
const arrow_drop_down = '../../../public/arrow_drop_down.svg';
|
||||
const arrow_drop_up = '../../../public/arrow_drop_up.svg';
|
||||
|
||||
interface TypeDropdownProps {
|
||||
selectedType: 'single' | 'multiply';
|
||||
onTypeChange: (type: 'single' | 'multiply') => void;
|
||||
|
|
@ -39,28 +36,12 @@ const TypeDropdown: React.FC<TypeDropdownProps> = ({selectedType, onTypeChange})
|
|||
};
|
||||
}, [dropdownRef]);
|
||||
|
||||
const getImage = (typeValue: string): string => {
|
||||
if (typeValue === 'multiply') {
|
||||
return multiple_selected;
|
||||
} else {
|
||||
return single_selected;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles.dropdownContainer} ref={dropdownRef}>
|
||||
<button className={styles.dropdownButton} onClick={handleToggle}>
|
||||
<img
|
||||
src={getImage(selectedType)}
|
||||
alt={selectedType === "single" ? "Одиночный выбор" : "Множественный выбор"}
|
||||
className={styles.selectedTypeIcon}
|
||||
/>
|
||||
{selectedType === 'single' ? <Single className={styles.selectedTypeIcon} /> : <Multiple className={styles.selectedTypeIcon} />}
|
||||
{selectedType === "single" ? "Одиночный выбор" : "Множественный выбор"}
|
||||
<img
|
||||
src={isOpen ? arrow_drop_up : arrow_drop_down}
|
||||
alt={isOpen ? "Закрыть" : "Открыть"}
|
||||
className={styles.dropdownArrow}
|
||||
/>
|
||||
{isOpen ? <DropUp className={styles.dropdownArrow} /> : <DropDown className={styles.dropdownArrow}/>}
|
||||
</button>
|
||||
|
||||
{isOpen && (
|
||||
|
|
@ -68,21 +49,14 @@ const TypeDropdown: React.FC<TypeDropdownProps> = ({selectedType, onTypeChange})
|
|||
<li>
|
||||
<button onClick={() => handleSelect("single")}
|
||||
className={styles.dropdownItem}>
|
||||
<img
|
||||
className={styles.dropdownItemIcon}
|
||||
src={getImage("single")}
|
||||
alt=""/>{' '}
|
||||
<Single className={styles.dropdownItemIcon}/>{' '}
|
||||
Одиночный выбор
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button className={styles.dropdownItem}
|
||||
onClick={() => handleSelect("multiply")}>
|
||||
<img
|
||||
src={getImage("multiply")}
|
||||
alt="Множественный выбор"
|
||||
className={styles.dropdownItemIcon}
|
||||
/>{' '}
|
||||
<Multiple className={styles.dropdownItemIcon}/>{' '}
|
||||
Множественный выбор
|
||||
</button>
|
||||
</li>
|
||||
|
|
|
|||
1
SurveyFrontend/src/vite-env.d.ts
vendored
1
SurveyFrontend/src/vite-env.d.ts
vendored
|
|
@ -1 +1,2 @@
|
|||
/// <reference types="vite/client" />
|
||||
/// <reference types="vite-plugin-svgr/client" />
|
||||
Loading…
Add table
Add a link
Reference in a new issue