svg - react components
This commit is contained in:
Tatiana Nikolaeva
parent
122f14adf7
commit
fd8273a2fe
25 changed files with 488 additions and 65 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue