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

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>
);
}