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.
|
|
|
import React, { useState } from "react";
|
|
|
|
|
|
|
|
import selected from "./selected.svg";
|
|
|
|
|
|
|
|
const BoxNextToEachOther = ({ items }) => {
|
|
|
|
const [active, setActive] = useState(null);
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div className="flex flex-row items-center mx-auto justify-between max-w-[750px] ">
|
|
|
|
{items.map((item, index) => (
|
|
|
|
<div
|
|
|
|
key={index}
|
|
|
|
className={`relative flex flex-col items-center justify-center text-2xl max-w-[224px] max-h-[210px] w-44 h-44 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: "غیر ایرانی",
|
|
|
|
},
|
|
|
|
],
|
|
|
|
};
|