diff --git a/src/App.js b/src/App.js
index 423f778..d9ba74d 100644
--- a/src/App.js
+++ b/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() {
{/* */}
{/* */}
{/* */}
+ {/* */}
{/*
diff --git a/src/components/BoxNextToEachOther/index.js b/src/components/BoxNextToEachOther/index.js
index 71653a2..28bec92 100644
--- a/src/components/BoxNextToEachOther/index.js
+++ b/src/components/BoxNextToEachOther/index.js
@@ -1,11 +1,54 @@
-import React from "react";
+import React, { useState } from "react";
-const BoxNextToEachOther = () => {
- return
BoxNextToEachOther
;
+import selected from "./selected.svg";
+
+const BoxNextToEachOther = ({ items }) => {
+ const [active, setActive] = useState(null);
+
+ return (
+
+ {items.map((item, index) => (
+
setActive(active === item ? null : item)}
+ >
+ {console.log(setActive)}
+
+ {item.title}
+
+ {active === item && (
+
+
+
+ )}
+
+ ))}
+
+ );
};
export default BoxNextToEachOther;
BoxNextToEachOther.defaultProps = {
- items: [{}],
+ items: [
+ {
+ title: "زائر",
+ },
+ {
+ title: "خادم",
+ },
+ {
+ title: "ایرانی",
+ },
+ {
+ title: "غیر ایرانی",
+ },
+ ],
};
diff --git a/src/components/BoxNextToEachOther/selected.svg b/src/components/BoxNextToEachOther/selected.svg
new file mode 100644
index 0000000..197dcf7
--- /dev/null
+++ b/src/components/BoxNextToEachOther/selected.svg
@@ -0,0 +1,4 @@
+