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.

55 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="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
3 years ago
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: "غیر ایرانی",
},
],
};