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 && ( +
+ selected-icon +
+ )} +
+ ))} +
+ ); }; 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 @@ + + + +