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.
1 line
5.7 KiB
1 line
5.7 KiB
2 years ago
|
{"ast":null,"code":"var _jsxFileName = \"/Users/mahdi/Documents/work/programming/barnameNegar/arbaeenWebApp/src/components/BoxNextToEachOther/index.js\",\n _s = $RefreshSig$();\n\nimport React, { useState } from \"react\";\nimport { jsxDEV as _jsxDEV } from \"react/jsx-dev-runtime\";\n\nconst BoxNextToEachOther = _ref => {\n _s();\n\n let {\n cards,\n selected\n } = _ref;\n const [active, setActive] = useState([]);\n return /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"w-fit flex flex-wrap justify-center items-center gap-x-4 gap-y-4\",\n children: cards.map((card, index) => /*#__PURE__*/_jsxDEV(\"div\", {\n className: `relative max-w-[224px] max-h-[210px] w-44 h-44 flex flex-col items-center justify-center text-2xl border border-secondary rounded-md cursor-pointer\n ${active.includes(card) ? \"bg-secondary\" : \"bg-surface\"}\n\n `,\n onClick: () => setActive(active.includes(card) ? active.filter(item => item != card) : [...active, card]),\n children: [console.log(setActive), /*#__PURE__*/_jsxDEV(\"h2\", {\n className: `font-bold \n ${active.includes(card) ? \"text-primaryText\" : \"text-primary\"}\n `,\n children: card.title\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 24,\n columnNumber: 11\n }, this), active.includes(card) && /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"absolute left-3 top-3\",\n children: /*#__PURE__*/_jsxDEV(\"img\", {\n src: selected,\n alt: \"selected-icon\",\n className: \"w-7\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 33,\n columnNumber: 15\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 32,\n columnNumber: 13\n }, this)]\n }, index, true, {\n fileName: _jsxFileName,\n lineNumber: 9,\n columnNumber: 9\n }, this))\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 7,\n columnNumber: 5\n }, this);\n};\n\n_s(BoxNextToEachOther, \"G4F9vzmefQ/ZV3KLn4PVxUKPNr0=\");\n\n_c = BoxNextToEachOther;\nexport default BoxNextToEachOther;\nBoxNextToEachOther.defaultProps = {\n selected: \"images/blue-thick-icon.svg\",\n cards: [{\n title: \"زائر\"\n }, {\n title: \"خادم\"\n }, {\n title: \"ایرانی\"\n }, {\n title: \"غیر ایرانی\"\n }]\n};\n\nvar _c;\n\n$RefreshReg$(_c, \"BoxNextToEachOther\");","map":{"version":3,"names":["React","useState","BoxNextToEachOther","cards","selected","active","setActive","map","card","index","includes","filter","item","console","log","title","defaultProps"],"sources":["/Users/mahdi/Documents/work/programming/barnameNegar/arbaeenWebApp/src/components/BoxNextToEachOther/index.js"],"sourcesContent":["import React, { useState } from \"react\";\n\nconst BoxNextToEachOther = ({ cards, selected }) => {\n const [active, setActive] = useState([]);\n\n return (\n <div className=\"w-fit flex flex-wrap justify-center items-center gap-x-4 gap-y-4\">\n {cards.map((card, index) => (\n <div\n key={index}\n className={`relative max-w-[224px] max-h-[210px] w-44 h-44 flex flex-col items-center justify-center text-2xl border border-secondary rounded-md cursor-pointer\n ${active.includes(card) ? \"bg-secondary\" : \"bg-surface\"}\n\n `}\n onClick={() =>\n setActive(\n active.includes(card)\n ? active.filter((item) => item != card)\n : [...active, card]\n )\n }\n >\n {console.log(setActive)}\n <h2\n className={`font-bold \n ${active.includes(card) ? \"text-primaryText\" : \"text-primary\"}\n `}\n >\n {card.title}\n </h2>\n {active.includes(card) && (\n <div className=\"absolute left-3 top-3\">\n <img src={selected} alt=\"selected-icon\" className=\"w-7\" />\n </div
|