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

master
Your Name 2 years ago
parent 3d7b682af9
commit 07adbd86cd
  1. 2
      src/App.js
  2. 51
      src/components/BoxNextToEachOther/index.js
  3. 4
      src/components/BoxNextToEachOther/selected.svg

@ -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" />

@ -1,11 +1,54 @@
import React from "react";
import React, { useState } from "react";
const BoxNextToEachOther = () => {
return <div>BoxNextToEachOther</div>;
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-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: "غیر ایرانی",
},
],
};

@ -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>

After

Width:  |  Height:  |  Size: 448 B

Loading…
Cancel
Save