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.
54 lines
1.3 KiB
54 lines
1.3 KiB
import React, { useState } from "react"; |
|
|
|
import selected from "./selected.svg"; |
|
|
|
const BoxNextToEachOther = ({ items }) => { |
|
const [active, setActive] = useState(null); |
|
|
|
return ( |
|
<div className="w-fit flex flex-row items-center gap-x-2"> |
|
{items.map((item, index) => ( |
|
<div |
|
key={index} |
|
className={`relative max-w-[224px] max-h-[210px] w-44 h-44 flex flex-col items-center justify-center text-2xl border border-[#EBF4FF] rounded-md cursor-pointer ${ |
|
active === item ? "bg-[#245CE1]" : "bg-white" |
|
}`} |
|
onClick={() => setActive(active === item ? null : item)} |
|
> |
|
{console.log(setActive)} |
|
<h2 |
|
className={`font-sansbold ${ |
|
active === item ? "text-white" : "text-[#0F0543]" |
|
}`} |
|
> |
|
{item.title} |
|
</h2> |
|
{active === item && ( |
|
<div className="absolute left-3 top-3"> |
|
<img src={selected} alt="selected-icon" className="w-7" /> |
|
</div> |
|
)} |
|
</div> |
|
))} |
|
</div> |
|
); |
|
}; |
|
|
|
export default BoxNextToEachOther; |
|
|
|
BoxNextToEachOther.defaultProps = { |
|
items: [ |
|
{ |
|
title: "زائر", |
|
}, |
|
{ |
|
title: "خادم", |
|
}, |
|
{ |
|
title: "ایرانی", |
|
}, |
|
{ |
|
title: "غیر ایرانی", |
|
}, |
|
], |
|
};
|
|
|