You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
62 lines
1.9 KiB
62 lines
1.9 KiB
import React, { useState } from "react"; |
|
import _ from "lodash"; |
|
|
|
export default function Question({ question }) { |
|
const [select, setSelect] = useState(""); |
|
return ( |
|
<div className="w-3/4 flex flex-col my-3"> |
|
<span |
|
className="inline text-semibold py-2 px-3 rounded-sm bg-blueFF text-blue52" |
|
style={{ width: "fit-content" }} |
|
> |
|
سوال ۱ |
|
</span> |
|
<p className="text-white text-sm my-2">{question.text}</p> |
|
<ul className="list-none m-0 p-0 w-full"> |
|
{question.options.map((option, index) => ( |
|
<li |
|
onClick={() => setSelect(option)} |
|
className={_.join( |
|
[ |
|
"rounded-md w-full overflow-hidden flex items-center my-2 cursor-pointer transition-all duration-500", |
|
], |
|
" " |
|
)} |
|
style={{ |
|
backgroundColor: select === option ? "#32af00" : "transparent", |
|
borderColor: select === option ? "transparent" : "#777", |
|
borderWidth: 1, |
|
borderStyle: "solid", |
|
}} |
|
key={index} |
|
> |
|
<span |
|
className={_.join( |
|
["h-full py-3 px-5 text-xs transition-all duration-500"], |
|
" " |
|
)} |
|
style={{ |
|
color: select === option ? "white" : "#E7E7E7", |
|
backgroundColor: select === option ? "#329f00" : "#444", |
|
}} |
|
> |
|
الف |
|
</span> |
|
<p |
|
className={_.join( |
|
[ |
|
"text-xs mr-4 transition-all duration-500", |
|
select === option ? "#66CD22" : "#E7E7E7", |
|
], |
|
" " |
|
)} |
|
style={{ color: select === option ? "white" : "#E7E7E7" }} |
|
> |
|
{option} |
|
</p> |
|
</li> |
|
))} |
|
</ul> |
|
</div> |
|
); |
|
}
|
|
|