|
|
|
import React, { useEffect, useState } from "react";
|
|
|
|
import attachIcon from '../../../assets/img/attach-circle.svg';
|
|
|
|
const AddQuestionPopUp = ({ titlePass, scorePass, submitOnClick, cancelOnClick, passOptionTitle, setAsAnswer, options }) => {
|
|
|
|
|
|
|
|
|
|
|
|
const gozine = [
|
|
|
|
'الف',
|
|
|
|
'ب',
|
|
|
|
'ج',
|
|
|
|
'د',
|
|
|
|
'ه',
|
|
|
|
'ز',
|
|
|
|
]
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div className="w-full z-10 fixed bg-black bg-opacity-20 h-screen backdrop-blur flex flex-col items-center top-0 left-0 justify-center">
|
|
|
|
<div className="w-1/2 flex flex-col items-center bg-white p-6 rounded-xl shadow-lg">
|
|
|
|
<div className="w-full">
|
|
|
|
<div className="w-8 h-8 text-white text-sm rounded-full cursor-pointer flex justify-center items-center bg-red52" onClick={cancelOnClick}>
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 15.044 15.044">
|
|
|
|
<g id="vuesax_linear_card-remove" data-name="vuesax/linear/card-remove" transform="translate(-252.46 -511.461)">
|
|
|
|
<g id="card-remove" transform="translate(253.309 512.31)">
|
|
|
|
<path id="Vector" d="M0,13.347,13.347,0" fill="none" stroke="#fff" strokeLinecap="round" strokeWidth="2" />
|
|
|
|
<path id="Vector-2" data-name="Vector" d="M13.347,13.347,0,0" fill="none" stroke="#fff" strokeLinecap="round" strokeWidth="2" />
|
|
|
|
</g>
|
|
|
|
</g>
|
|
|
|
</svg>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className='w-4/5 flex flex-col text-blue3A mt-4 mb-2 font-bold justify-between items-center'>
|
|
|
|
<div className='w-11/12 flex flex-col bg-white rounded-xl border border-gray-300 shadow-md'>
|
|
|
|
<textarea className='w-full border-b border-gray-300 rounded-t-xl p-4 text-blue3A overflow-hideen text-right outline-none' placeholder="صورت سوال..." rows={1}
|
|
|
|
onChange={(e) => titlePass(e.target.value)}
|
|
|
|
/>
|
|
|
|
|
|
|
|
<div className='w-full p-3 px-4 h-12 flex justify-between items-center'>
|
|
|
|
<div>
|
|
|
|
<p className='text-xs'>نمره :
|
|
|
|
<input type='number' className="w-6 h-6 border border-gray-200 mr-1 rounded"
|
|
|
|
onChange={(e) => scorePass(e.target.value)}
|
|
|
|
/>
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<input type='file' className="hidden" id="Add_Question_Add_Image" />
|
|
|
|
<label htmlFor="Add_Question_Add_Image" className="flex items-center">
|
|
|
|
<p className="text-gray-500 ml-1">آپلود</p>
|
|
|
|
<img src={attachIcon} className="h-full w-10" />
|
|
|
|
</label>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className='w-11/12 justify-between mt-4 flex flex-wrap'>
|
|
|
|
{
|
|
|
|
options?.map(
|
|
|
|
(item) => (
|
|
|
|
<div className='my-2 flex items-center justify-center shadow-md' style={{width: 'calc(50% - 10px)'}} onClick={() => setAsAnswer(item.id) }>
|
|
|
|
<p className={` h-12 flex items-center justify-center w-16 rounded-lg rounded-l-none ${item.isAnswer ? 'text-white bg-green-400' : 'bg-gray-200 border border-gray-300'}`}>{gozine[item.id - 1]}</p>
|
|
|
|
<input className={` h-12 outline-none flex items-center justify-center p-2 w-full rounded-lg rounded-r-none ${item.isAnswer ? 'bg-green-200' : 'bg-white border border-gray-300'}`}
|
|
|
|
onChange={e => passOptionTitle(e.target.value, item.id)}
|
|
|
|
placeholder={`گزینه ${item.id}`}/>
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
)
|
|
|
|
}
|
|
|
|
</div>
|
|
|
|
<div></div>
|
|
|
|
<div className="w-11/12 mt-5 flex justify-between items-center">
|
|
|
|
<button className=" bg-white text-xl text-red-500 border-red-500 w-full h-12 mx-8 rounded-xl border" onClick={cancelOnClick
|
|
|
|
|
|
|
|
}>
|
|
|
|
انصراف
|
|
|
|
</button>
|
|
|
|
|
|
|
|
<button className=" bg-green-500 text-xl text-white border-green-500 w-full mx-8 h-12 rounded-xl border" onClick={
|
|
|
|
submitOnClick
|
|
|
|
}>
|
|
|
|
ثبت سوال
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default AddQuestionPopUp;
|