update App.js and src/components/BoxNextToEachOther/index.js

src/App.js

@@ -86,6 +86,7 @@ import LeafletMap from "./components/LeafletMap";
 
 import TestComponentNew from "./components/TestComponentNew";
 import DateRangePicker from "./components/DateRangePicker";
+import BoxNextToEachOther from "./components/BoxNextToEachOther";
 
 function App() {
   return (
@@ -172,6 +173,7 @@ function App() {
         {/* <IconText /> */}
         {/* <CustomToast /> */}
         {/* <DateRangePicker /> */}
+        {/* <BoxNextToEachOther /> */}
 
         {/* <div className="flex">
           <SidebarDesign2 className="w-1/5" />

src/components/BoxNextToEachOther/index.js

@@ -1,11 +1,54 @@
-import React from "react";
+import React, { useState } from "react";
 
-const BoxNextToEachOther = () => {
+import selected from "./selected.svg";
-  return <div>BoxNextToEachOther</div>;
+
+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-bold ${
+              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: [{}],
+  items: [
+    {
+      title: "زائر",
+    },
+    {
+      title: "خادم",
+    },
+    {
+      title: "ایرانی",
+    },
+    {
+      title: "غیر ایرانی",
+    },
+  ],
 };

src/components/BoxNextToEachOther/selected.svg

@@ -0,0 +1,4 @@
+<svg id="Group_5" data-name="Group 5" xmlns="http://www.w3.org/2000/svg" width="39.61" height="39.61" viewBox="0 0 39.61 39.61">
+  <path id="Path_1" data-name="Path 1" d="M19.805,0A19.805,19.805,0,1,1,0,19.805,19.805,19.805,0,0,1,19.805,0Z" fill="#fff"/>
+  <path id="Vector" d="M0,7.287l5.621,7.287L16.863,0" transform="translate(11.363 12.938)" fill="none" stroke="#245ce1" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
+</svg>