create the Login.jsx and add API
This commit is contained in:
parent
306c3257a9
commit
872a98fd9f
|
|
@ -9,6 +9,7 @@
|
|||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"@tailwindcss/vite": "^4.1.14",
|
||||
"axios": "^1.13.2",
|
||||
"react": "^19.1.1",
|
||||
"react-dom": "^19.1.1",
|
||||
"react-icons": "^5.5.0",
|
||||
|
|
@ -1789,6 +1790,23 @@
|
|||
"dev": true,
|
||||
"license": "Python-2.0"
|
||||
},
|
||||
"node_modules/asynckit": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
|
||||
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/axios": {
|
||||
"version": "1.13.2",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-1.13.2.tgz",
|
||||
"integrity": "sha512-VPk9ebNqPcy5lRGuSlKx752IlDatOjT9paPlm8A7yOuW2Fbvp4X3JznJtT4f0GzGLLiWE9W8onz51SqLYwzGaA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"follow-redirects": "^1.15.6",
|
||||
"form-data": "^4.0.4",
|
||||
"proxy-from-env": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/balanced-match": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
|
||||
|
|
@ -1851,6 +1869,19 @@
|
|||
"node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
|
||||
}
|
||||
},
|
||||
"node_modules/call-bind-apply-helpers": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
|
||||
"integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"es-errors": "^1.3.0",
|
||||
"function-bind": "^1.1.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/callsites": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
|
||||
|
|
@ -1941,6 +1972,18 @@
|
|||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/combined-stream": {
|
||||
"version": "1.0.8",
|
||||
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
|
||||
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"delayed-stream": "~1.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/concat-map": {
|
||||
"version": "0.0.1",
|
||||
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
|
||||
|
|
@ -2038,6 +2081,15 @@
|
|||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/delayed-stream": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
|
||||
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=0.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/detect-libc": {
|
||||
"version": "2.1.2",
|
||||
"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
|
||||
|
|
@ -2058,6 +2110,20 @@
|
|||
"tslib": "^2.0.3"
|
||||
}
|
||||
},
|
||||
"node_modules/dunder-proto": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
|
||||
"integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"call-bind-apply-helpers": "^1.0.1",
|
||||
"es-errors": "^1.3.0",
|
||||
"gopd": "^1.2.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/electron-to-chromium": {
|
||||
"version": "1.5.234",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.234.tgz",
|
||||
|
|
@ -2101,6 +2167,51 @@
|
|||
"is-arrayish": "^0.2.1"
|
||||
}
|
||||
},
|
||||
"node_modules/es-define-property": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
|
||||
"integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/es-errors": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
|
||||
"integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/es-object-atoms": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
|
||||
"integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"es-errors": "^1.3.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/es-set-tostringtag": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
|
||||
"integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"es-errors": "^1.3.0",
|
||||
"get-intrinsic": "^1.2.6",
|
||||
"has-tostringtag": "^1.0.2",
|
||||
"hasown": "^2.0.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/escalade": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
|
||||
|
|
@ -2398,6 +2509,42 @@
|
|||
"dev": true,
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/follow-redirects": {
|
||||
"version": "1.15.11",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz",
|
||||
"integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "individual",
|
||||
"url": "https://github.com/sponsors/RubenVerborgh"
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=4.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"debug": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/form-data": {
|
||||
"version": "4.0.5",
|
||||
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.5.tgz",
|
||||
"integrity": "sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"asynckit": "^0.4.0",
|
||||
"combined-stream": "^1.0.8",
|
||||
"es-set-tostringtag": "^2.1.0",
|
||||
"hasown": "^2.0.2",
|
||||
"mime-types": "^2.1.12"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/fsevents": {
|
||||
"version": "2.3.3",
|
||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
|
||||
|
|
@ -2412,6 +2559,15 @@
|
|||
"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/function-bind": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
|
||||
"integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/gensync": {
|
||||
"version": "1.0.0-beta.2",
|
||||
"resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
|
||||
|
|
@ -2422,6 +2578,43 @@
|
|||
"node": ">=6.9.0"
|
||||
}
|
||||
},
|
||||
"node_modules/get-intrinsic": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
|
||||
"integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"call-bind-apply-helpers": "^1.0.2",
|
||||
"es-define-property": "^1.0.1",
|
||||
"es-errors": "^1.3.0",
|
||||
"es-object-atoms": "^1.1.1",
|
||||
"function-bind": "^1.1.2",
|
||||
"get-proto": "^1.0.1",
|
||||
"gopd": "^1.2.0",
|
||||
"has-symbols": "^1.1.0",
|
||||
"hasown": "^2.0.2",
|
||||
"math-intrinsics": "^1.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/get-proto": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
|
||||
"integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"dunder-proto": "^1.0.1",
|
||||
"es-object-atoms": "^1.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/glob-parent": {
|
||||
"version": "6.0.2",
|
||||
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
|
||||
|
|
@ -2448,6 +2641,18 @@
|
|||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/gopd": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
|
||||
"integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/graceful-fs": {
|
||||
"version": "4.2.11",
|
||||
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
|
||||
|
|
@ -2464,6 +2669,45 @@
|
|||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/has-symbols": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
|
||||
"integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/has-tostringtag": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
|
||||
"integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"has-symbols": "^1.0.3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/hasown": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
|
||||
"integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"function-bind": "^1.1.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/ignore": {
|
||||
"version": "5.3.2",
|
||||
"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
|
||||
|
|
@ -2953,6 +3197,36 @@
|
|||
"@jridgewell/sourcemap-codec": "^1.5.5"
|
||||
}
|
||||
},
|
||||
"node_modules/math-intrinsics": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
|
||||
"integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/mime-db": {
|
||||
"version": "1.52.0",
|
||||
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
|
||||
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/mime-types": {
|
||||
"version": "2.1.35",
|
||||
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
|
||||
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"mime-db": "1.52.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/minimatch": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
|
||||
|
|
@ -3205,6 +3479,12 @@
|
|||
"node": ">= 0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/proxy-from-env": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
|
||||
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/punycode": {
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@tailwindcss/vite": "^4.1.14",
|
||||
"axios": "^1.13.2",
|
||||
"react": "^19.1.1",
|
||||
"react-dom": "^19.1.1",
|
||||
"react-icons": "^5.5.0",
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 91 KiB |
|
|
@ -1,4 +1,4 @@
|
|||
import React from "react";
|
||||
import React, { useState, useEffect } from "react";
|
||||
import Bg1 from "../../assets/icons/bg1.svg";
|
||||
import {GrLocation} from "react-icons/gr";
|
||||
import {BiEdit} from "react-icons/bi";
|
||||
|
|
@ -18,267 +18,443 @@ import Coffee2 from "../../assets/icons/coffee2.svg";
|
|||
import Coffee1 from "../../assets/icons/coffee1.svg";
|
||||
import Coffee3 from "../../assets/icons/coffee3.svg";
|
||||
import Edit from "../../assets/icons/edit.svg";
|
||||
import { MdDelete } from "react-icons/md";
|
||||
import { IoMdCheckmark, IoMdClose } from "react-icons/io";
|
||||
|
||||
const EditCafe = () => {
|
||||
// State برای نگهداری عنوانها با localStorage
|
||||
const [categories, setCategories] = useState(() => {
|
||||
const saved = localStorage.getItem('cafeCategories');
|
||||
return saved ? JSON.parse(saved) : [
|
||||
"نوشیدنی سرد",
|
||||
"نوشیدنی گرم",
|
||||
"کیک و دسر",
|
||||
"صبحانه",
|
||||
"ساندویچ و برگر",
|
||||
"سالاد و پیش غذا",
|
||||
];
|
||||
});
|
||||
|
||||
// ذخیره تغییرات در localStorage
|
||||
useEffect(() => {
|
||||
localStorage.setItem('cafeCategories', JSON.stringify(categories));
|
||||
}, [categories]);
|
||||
|
||||
// State برای فعال کردن حالت ویرایش
|
||||
const [isEditMode, setIsEditMode] = useState(false);
|
||||
|
||||
// State برای مدیریت حالت اضافه کردن
|
||||
const [isAdding, setIsAdding] = useState(false);
|
||||
const [newCategory, setNewCategory] = useState("");
|
||||
|
||||
// State برای مدیریت حالت ویرایش
|
||||
const [editingIndex, setEditingIndex] = useState(null);
|
||||
const [editValue, setEditValue] = useState("");
|
||||
|
||||
// تابع اضافه کردن عنوان جدید
|
||||
const handleAddCategory = () => {
|
||||
if (newCategory.trim()) {
|
||||
setCategories([...categories, newCategory.trim()]);
|
||||
setNewCategory("");
|
||||
setIsAdding(false);
|
||||
// اسکرول رو به ابتدا (راست برای RTL) برمیگردونیم
|
||||
setTimeout(() => {
|
||||
const scrollContainer = document.querySelector('.categories-scroll');
|
||||
if (scrollContainer) {
|
||||
// برای RTL باید scrollLeft رو به حداکثر ببریم
|
||||
scrollContainer.scrollLeft = scrollContainer.scrollWidth;
|
||||
}
|
||||
}, 0);
|
||||
}
|
||||
};
|
||||
|
||||
// تابع حذف عنوان
|
||||
const handleDeleteCategory = (index) => {
|
||||
const newCategories = categories.filter((_, i) => i !== index);
|
||||
setCategories(newCategories);
|
||||
};
|
||||
|
||||
// تابع شروع ویرایش
|
||||
const handleStartEdit = (index) => {
|
||||
setEditingIndex(index);
|
||||
setEditValue(categories[index]);
|
||||
};
|
||||
|
||||
// تابع ذخیره ویرایش
|
||||
const handleSaveEdit = () => {
|
||||
if (editValue.trim()) {
|
||||
const newCategories = [...categories];
|
||||
newCategories[editingIndex] = editValue.trim();
|
||||
setCategories(newCategories);
|
||||
setEditingIndex(null);
|
||||
setEditValue("");
|
||||
}
|
||||
};
|
||||
|
||||
// تابع لغو ویرایش
|
||||
const handleCancelEdit = () => {
|
||||
setEditingIndex(null);
|
||||
setEditValue("");
|
||||
};
|
||||
|
||||
return (
|
||||
<section>
|
||||
<h3 className="text-[#402E32] font-bold">ادیت کافه ترنج</h3>
|
||||
<>
|
||||
<style>
|
||||
{`
|
||||
.scrollbar-hide::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.scrollbar-hide {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
body::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
body {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
<section dir="rtl">
|
||||
<h3 className="text-[#402E32] font-bold">ادیت کافه ترنج</h3>
|
||||
|
||||
<div className="mt-9 border-2 border-[#8b8886] p-10 rounded-2xl flex gap-4">
|
||||
<div>
|
||||
<img className="w-[461px]" src={Bg1} alt="Logo"/>
|
||||
</div>
|
||||
<div className="mt-9 border-2 border-[#8b8886] p-10 rounded-2xl flex gap-4">
|
||||
<div>
|
||||
<img className="w-[461px]" src={Bg1} alt="Logo"/>
|
||||
</div>
|
||||
|
||||
<div className="relative flex flex-col gap-4.5">
|
||||
<div className="absolute top-2 left-0 -mt-5">
|
||||
<button
|
||||
className="border-2 border-[#bb8f70] w-25 h-10 rounded-3xl text-[#402e32] hover:bg-[#7f4629] hover:text-white transition-all duration-300 hover:border-none">
|
||||
انصراف
|
||||
</button>
|
||||
<button
|
||||
className="border-2 border-[#bb8f70] bg-[#7f4629] text-white w-25 h-10 rounded-3xl mr-4 hover:bg-[#5f494f] transition-all duration-300 hover:border-none">
|
||||
تایید
|
||||
</button>
|
||||
</div>
|
||||
<BiEdit className="w-4.5 h-4.5 -mt-1"/>
|
||||
<h3 className="font-bold text-base">کافه ترنج</h3>
|
||||
<hr className="w-38 -mt-3 border-1 text-[#80931e]"/>
|
||||
<div className="flex items-center gap-2">
|
||||
<GrLocation/>
|
||||
<span className="text-base">اصفهان - خیابان آذر </span>
|
||||
</div>
|
||||
<hr className="w-38 -mt-3 border-1 text-[#80931e]"/>
|
||||
<div className="relative flex flex-col gap-4.5">
|
||||
<div className="absolute top-2 left-0 -mt-5">
|
||||
<button
|
||||
className="border-2 border-[#bb8f70] w-25 h-10 rounded-3xl text-[#402e32] hover:bg-[#7f4629] hover:text-white transition-all duration-300 hover:border-none">
|
||||
انصراف
|
||||
</button>
|
||||
<button
|
||||
className="border-2 border-[#bb8f70] bg-[#7f4629] text-white w-25 h-10 rounded-3xl mr-4 hover:bg-[#5f494f] transition-all duration-300 hover:border-none">
|
||||
تایید
|
||||
</button>
|
||||
</div>
|
||||
<BiEdit className="w-4.5 h-4.5 -mt-1"/>
|
||||
<h3 className="font-bold text-base">کافه ترنج</h3>
|
||||
<hr className="w-38 -mt-3 border-1 text-[#80931e]"/>
|
||||
<div className="flex items-center gap-2">
|
||||
<GrLocation/>
|
||||
<span className="text-base">اصفهان - خیابان آذر </span>
|
||||
</div>
|
||||
<hr className="w-38 -mt-3 border-1 text-[#80931e]"/>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<FaRegStar/>
|
||||
<span className="text-base">3.9</span>
|
||||
</div>
|
||||
<h3 className="font-bold text-base">درباره کافه</h3>
|
||||
<span className="text-base">
|
||||
<div className="flex items-center gap-2">
|
||||
<FaRegStar/>
|
||||
<span className="text-base">3.9</span>
|
||||
</div>
|
||||
<h3 className="font-bold text-base">درباره کافه</h3>
|
||||
<span className="text-base">
|
||||
کافه ترنج، یک کافی شاپ با محیطی دنج و دلچسب در شهر اصفهان و یکی از
|
||||
ممتازترین کافی شاپهای ابن شهر است. از جمله خدمات این کافه میتوان
|
||||
به اینترنت رایگان و ارائه کتابهایی برای مطالعه در داخل کافه اشاره
|
||||
کرد.
|
||||
</span>
|
||||
<hr className="w-[104%] -mt-3 border-1 text-[#80931e]"/>
|
||||
<hr className="w-[104%] -mt-3 border-1 text-[#80931e]"/>
|
||||
|
||||
<h3 className="text-[#402E32] font-bold mt-10 relative -right-64">
|
||||
ویژگی ها
|
||||
</h3>
|
||||
<h3 className="text-[#402E32] font-bold mt-10 relative -right-64">
|
||||
ویژگی ها
|
||||
</h3>
|
||||
|
||||
<div className="relative -mr-71 -ml-7 mt-5 flex gap-3">
|
||||
<div
|
||||
className="bg-[#e1d5c2] w-[140px] h-[137.6px] flex flex-col items-center gap-8 text-center rounded-4xl transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md">
|
||||
<img src={Coffee3} className="w-6 h-6 text-[#402E32] mt-5"/>
|
||||
<span className="text-[#402E32] font-medium whitespace-nowrap">
|
||||
<div className="relative -mr-71 -ml-7 mt-5 flex gap-3">
|
||||
<div
|
||||
className="bg-[#e1d5c2] w-[140px] h-[137.6px] flex flex-col items-center gap-8 text-center rounded-4xl transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md">
|
||||
<img src={Coffee3} className="w-6 h-6 text-[#402E32] mt-5"/>
|
||||
<span className="text-[#402E32] font-medium whitespace-nowrap">
|
||||
منو کافه:
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="flex flex-col gap-4 text-[#402E32] font-medium w-[161.5px] h-[137.6px] bg-[#e1d5c2] rounded-4xl pr-3 transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md">
|
||||
<img src={Vector15} className="w-6 h-6 text-[#402E32] mt-5"/>
|
||||
<span>ساعت کاری:</span>
|
||||
<span> 23 - 8</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="flex flex-col gap-4 text-[#402E32] font-medium w-[161.5px] h-[137.6px] bg-[#e1d5c2] rounded-4xl pr-3 transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md">
|
||||
<img src={Vector14} className="w-6 h-6 text-[#402E32] mt-5"/>
|
||||
<span>رزرو :</span>
|
||||
<span>رزرو آنلاین</span>
|
||||
</div>
|
||||
<div
|
||||
className="flex flex-col gap-4 text-[#402E32] font-medium w-[170.5px] h-[137.6px] bg-[#e1d5c2] rounded-4xl pr-3 transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md">
|
||||
<img src={Vector11} className="w-6 h-6 text-[#402E32] mt-5"/>
|
||||
<span>موسیقی :</span>
|
||||
<span>موسیقی زنده آخر هفته</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="flex flex-col gap-4 text-[#402E32] font-medium w-[161.5px] h-[137.6px] bg-[#e1d5c2] rounded-4xl pr-3 transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md">
|
||||
<img src={Vector13} className="w-6 h-6 text-[#402E32] mt-5"/>
|
||||
<span>پارکینگ :</span>
|
||||
<span>عمومی</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="flex flex-col gap-4 text-[#402E32] font-medium w-[161.5px] h-[137.6px] bg-[#e1d5c2] rounded-4xl pr-3 transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md">
|
||||
<img src={Vector12} className="w-6 h-6 text-[#402E32] mt-5"/>
|
||||
<span>دسترسی آسان :</span>
|
||||
<span>مناسب افراد ناتوان</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="flex justify-center items-center w-[150.5px] h-[137.6px] bg-[#5e5450] rounded-4xl transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md">
|
||||
<img src={Vector9} className="w-6 h-6 text-[#402E32]"/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="mt-10 flex gap-10 justify-between -mr-64 text-[#402E32] font-medium">
|
||||
<div className="flex items-center gap-2 justify-center">
|
||||
<img src={Vector16} alt="Logo"/>
|
||||
<span>عنوان</span>
|
||||
</div>
|
||||
<span>نوشیدنی سرد</span>
|
||||
<span>نوشیدنی گرم</span>
|
||||
<span>کیک و دسر</span>
|
||||
<span>صبحانه</span>
|
||||
<span>ساندویچ و برگر</span>
|
||||
<span>سالاد و پیش غذا</span>
|
||||
</div>
|
||||
<hr className="w-[132%] -mr-66 mt-3 border-2 rounded-3xl text-[#939393]"/>
|
||||
|
||||
<div className="mt-9 flex items-center gap-2 -mr-64 text-[#a79fa1] font-bold">
|
||||
<img src={Vector16} alt="Logo"/>
|
||||
<h3>افزودن زیر عنوان</h3>
|
||||
</div>
|
||||
|
||||
<div className="mt-9 flex items-center gap-2 -mr-64 text-[#66585b] font-bold">
|
||||
<img className="w-5.5 h-5.5" src={Edit} alt="Logo"/>
|
||||
<img className="w-6 h-6" src={Coffee3} alt="Logo"/>
|
||||
<h3>قهوه ها</h3>
|
||||
<hr className="mt-9 -mr-15 w-[5%] border-1 text-[#80931e]"/>
|
||||
</div>
|
||||
|
||||
<div className="mt-9 flex items-center gap-2 -mr-64 text-[#66585b] font-bold">
|
||||
<img src={Vector16} alt="Logo"/>
|
||||
<h3>آیتم</h3>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-3 gap-5 -mr-64">
|
||||
<div
|
||||
className="mt-13 flex items-center flex-col justify-center w-[320px] h-[391px] transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md">
|
||||
<h1 className="text-[#402E32] font-bold -mr-50">اسپرسو100%</h1>
|
||||
<img src={Sperso} alt="Logo" className="mt-5"/>
|
||||
<div className="flex justify-between gap-50 mt-3 text-[#66585b] font-medium">
|
||||
<span>قیمت</span>
|
||||
<span>118.000</span>
|
||||
className="flex flex-col gap-4 text-[#402E32] font-medium w-[161.5px] h-[137.6px] bg-[#e1d5c2] rounded-4xl pr-3 transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md">
|
||||
<img src={Vector15} className="w-6 h-6 text-[#402E32] mt-5"/>
|
||||
<span>ساعت کاری:</span>
|
||||
<span> 23 - 8</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="flex flex-col gap-4 text-[#402E32] font-medium w-[161.5px] h-[137.6px] bg-[#e1d5c2] rounded-4xl pr-3 transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md">
|
||||
<img src={Vector14} className="w-6 h-6 text-[#402E32] mt-5"/>
|
||||
<span>رزرو :</span>
|
||||
<span>رزرو آنلاین</span>
|
||||
</div>
|
||||
<div
|
||||
className="flex flex-col gap-4 text-[#402E32] font-medium w-[170.5px] h-[137.6px] bg-[#e1d5c2] rounded-4xl pr-3 transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md">
|
||||
<img src={Vector11} className="w-6 h-6 text-[#402E32] mt-5"/>
|
||||
<span>موسیقی :</span>
|
||||
<span>موسیقی زنده آخر هفته</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="flex flex-col gap-4 text-[#402E32] font-medium w-[161.5px] h-[137.6px] bg-[#e1d5c2] rounded-4xl pr-3 transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md">
|
||||
<img src={Vector13} className="w-6 h-6 text-[#402E32] mt-5"/>
|
||||
<span>پارکینگ :</span>
|
||||
<span>عمومی</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="flex flex-col gap-4 text-[#402E32] font-medium w-[161.5px] h-[137.6px] bg-[#e1d5c2] rounded-4xl pr-3 transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md">
|
||||
<img src={Vector12} className="w-6 h-6 text-[#402E32] mt-5"/>
|
||||
<span>دسترسی آسان :</span>
|
||||
<span>مناسب افراد ناتوان</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="flex justify-center items-center w-[150.5px] h-[137.6px] bg-[#5e5450] rounded-4xl transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md">
|
||||
<img src={Vector9} className="w-6 h-6 text-[#402E32]"/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="mt-10 -mr-64 text-[#402E32] font-medium w-[132%]">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="max-w-[930px] overflow-hidden flex-1">
|
||||
<div className="categories-scroll flex gap-10 overflow-x-auto scrollbar-hide">
|
||||
<div className="flex items-center gap-2 justify-center flex-shrink-0">
|
||||
<img
|
||||
src={Vector16}
|
||||
alt="Logo"
|
||||
className="cursor-pointer hover:opacity-70 transition-opacity"
|
||||
onClick={() => setIsEditMode(!isEditMode)}
|
||||
title={isEditMode ? "خروج از حالت ویرایش" : "ویرایش عنوانها"}
|
||||
/>
|
||||
<span className="whitespace-nowrap">عنوان</span>
|
||||
</div>
|
||||
|
||||
{!isEditMode ? (
|
||||
// حالت عادی - فقط نمایش عنوانها
|
||||
<>
|
||||
{categories.map((category, index) => (
|
||||
<span key={index} className="whitespace-nowrap flex-shrink-0">{category}</span>
|
||||
))}
|
||||
</>
|
||||
) : (
|
||||
// حالت ویرایش - نمایش دکمههای ویرایش و حذف بالای عنوان
|
||||
<>
|
||||
{categories.map((category, index) => (
|
||||
<div key={index} className="flex flex-col items-center gap-1 flex-shrink-0">
|
||||
{editingIndex === index ? (
|
||||
// حالت ویرایش
|
||||
<>
|
||||
<div className="flex items-center gap-1 mb-1">
|
||||
<IoMdCheckmark
|
||||
className="text-green-600 cursor-pointer hover:text-green-800 w-4 h-4 flex-shrink-0"
|
||||
onClick={handleSaveEdit}
|
||||
title="ذخیره"
|
||||
/>
|
||||
<IoMdClose
|
||||
className="text-red-600 cursor-pointer hover:text-red-800 w-4 h-4 flex-shrink-0"
|
||||
onClick={handleCancelEdit}
|
||||
title="لغو"
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
value={editValue}
|
||||
onChange={(e) => setEditValue(e.target.value)}
|
||||
className="border-2 border-[#bb8f70] rounded-lg px-2 py-1 text-sm focus:outline-none focus:border-[#7f4629] w-[100px] text-center"
|
||||
autoFocus
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
// حالت عادی - آیکنها بالای عنوان
|
||||
<>
|
||||
<div className="flex items-center gap-1 mb-1">
|
||||
<BiEdit
|
||||
className="text-[#7f4629] cursor-pointer hover:text-[#5f494f] w-4 h-4 flex-shrink-0"
|
||||
onClick={() => handleStartEdit(index)}
|
||||
title="ویرایش"
|
||||
/>
|
||||
<MdDelete
|
||||
className="text-red-600 cursor-pointer hover:text-red-800 w-4 h-4 flex-shrink-0"
|
||||
onClick={() => handleDeleteCategory(index)}
|
||||
title="حذف"
|
||||
/>
|
||||
</div>
|
||||
<span className="whitespace-nowrap">{category}</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* دکمه اضافه کردن عنوان جدید - بیرون از container اسکرول */}
|
||||
{isEditMode && (
|
||||
<div className="flex-shrink-0" style={{minWidth: '120px'}}>
|
||||
{!isAdding ? (
|
||||
<button
|
||||
onClick={() => setIsAdding(true)}
|
||||
className="text-[#7f4629] hover:text-[#5f494f] font-bold transition-colors whitespace-nowrap w-full"
|
||||
title="اضافه کردن عنوان جدید"
|
||||
>
|
||||
+ افزودن
|
||||
</button>
|
||||
) : (
|
||||
<div className="flex flex-col items-center gap-1">
|
||||
<div className="flex items-center gap-1 mb-1">
|
||||
<IoMdCheckmark
|
||||
className="text-green-600 cursor-pointer hover:text-green-800 w-4 h-4 flex-shrink-0"
|
||||
onClick={handleAddCategory}
|
||||
title="ذخیره"
|
||||
/>
|
||||
<IoMdClose
|
||||
className="text-red-600 cursor-pointer hover:text-red-800 w-4 h-4 flex-shrink-0"
|
||||
onClick={() => {
|
||||
setIsAdding(false);
|
||||
setNewCategory("");
|
||||
}}
|
||||
title="لغو"
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
value={newCategory}
|
||||
onChange={(e) => setNewCategory(e.target.value)}
|
||||
placeholder="عنوان جدید"
|
||||
className="border-2 border-[#bb8f70] rounded-lg px-2 py-1 text-sm focus:outline-none focus:border-[#7f4629] w-[100px] text-center"
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<span className="font-light text-[#66585b] mt-2 break-words mr-4 text-[14.90px]">
|
||||
</div>
|
||||
<hr className="w-[132%] -mr-66 mt-3 border-2 rounded-3xl text-[#939393]"/>
|
||||
|
||||
<div className="mt-9 flex items-center gap-2 -mr-64 text-[#a79fa1] font-bold">
|
||||
<img src={Vector16} alt="Logo"/>
|
||||
<h3>افزودن زیر عنوان</h3>
|
||||
</div>
|
||||
|
||||
<div className="mt-9 flex items-center gap-2 -mr-64 text-[#66585b] font-bold">
|
||||
<img className="w-5.5 h-5.5" src={Edit} alt="Logo"/>
|
||||
<img className="w-6 h-6" src={Coffee3} alt="Logo"/>
|
||||
<h3>قهوه ها</h3>
|
||||
<hr className="mt-9 -mr-15 w-[5%] border-1 text-[#80931e]"/>
|
||||
</div>
|
||||
|
||||
<div className="mt-9 flex items-center gap-2 -mr-64 text-[#66585b] font-bold">
|
||||
<img src={Vector16} alt="Logo"/>
|
||||
<h3>آیتم</h3>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-3 gap-5 -mr-64">
|
||||
<div
|
||||
className="mt-13 flex items-center flex-col justify-center w-[320px] h-[391px] transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md">
|
||||
<h1 className="text-[#402E32] font-bold -mr-50">اسپرسو100%</h1>
|
||||
<img src={Sperso} alt="Logo" className="mt-5"/>
|
||||
<div className="flex justify-between gap-50 mt-3 text-[#66585b] font-medium">
|
||||
<span>قیمت</span>
|
||||
<span>118.000</span>
|
||||
</div>
|
||||
<span className="font-light text-[#66585b] mt-2 break-words mr-4 text-[14.90px]">
|
||||
45 میلی لیتر، قهوه، 100% عربیکا، دم شده با دستگاه اسپرسو ساز،
|
||||
به همراه یک عدد آب معدنی مینی
|
||||
</span>
|
||||
<hr className="mt-5 w-[90%] border-3 rounded-4xl text-[#e6e2de]"/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="mt-10 flex items-center flex-col justify-center w-[320px] h-[391px] transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md">
|
||||
<h1 className="text-[#402E32] font-bold -mr-50">
|
||||
کارامل ماکیاتو
|
||||
</h1>
|
||||
<img src={Coffee1} alt="Logo" className="mt-5"/>
|
||||
<div className="flex justify-between gap-50 mt-3 text-[#66585b] font-medium">
|
||||
<span>قیمت</span>
|
||||
<span>149.000</span>
|
||||
<hr className="mt-5 w-[90%] border-3 rounded-4xl text-[#e6e2de]"/>
|
||||
</div>
|
||||
<span className="font-light text-[#66585b] mt-2 break-words mr-4 text-[14.90px]">
|
||||
|
||||
<div
|
||||
className="mt-10 flex items-center flex-col justify-center w-[320px] h-[391px] transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md">
|
||||
<h1 className="text-[#402E32] font-bold -mr-50">
|
||||
کارامل ماکیاتو
|
||||
</h1>
|
||||
<img src={Coffee1} alt="Logo" className="mt-5"/>
|
||||
<div className="flex justify-between gap-50 mt-3 text-[#66585b] font-medium">
|
||||
<span>قیمت</span>
|
||||
<span>149.000</span>
|
||||
</div>
|
||||
<span className="font-light text-[#66585b] mt-2 break-words mr-4 text-[14.90px]">
|
||||
220 میلی لیتر، 2 شات اسپرسو 30% روبوستا، 70% عربیکا، یک لکه
|
||||
فوم شیر، سیروپ کارامل
|
||||
</span>
|
||||
<hr className="mt-5 w-[90%] border-3 rounded-4xl text-[#e6e2de]"/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="mt-10 flex items-center flex-col justify-center w-[320px] h-[391px] transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md">
|
||||
<h1 className="text-[#402E32] font-bold -mr-47">
|
||||
اسپرسو آفوگاتو
|
||||
</h1>
|
||||
<img src={Coffee2} alt="Logo" className="mt-5"/>
|
||||
<div className="flex justify-between gap-50 mt-3 text-[#66585b] font-medium">
|
||||
<span>قیمت</span>
|
||||
<span>118.000</span>
|
||||
<hr className="mt-5 w-[90%] border-3 rounded-4xl text-[#e6e2de]"/>
|
||||
</div>
|
||||
<span
|
||||
className="font-light text-[#66585b] mt-2 mb-10 break-words -mr-23 text-[14.90px]">
|
||||
|
||||
<div
|
||||
className="mt-10 flex items-center flex-col justify-center w-[320px] h-[391px] transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md">
|
||||
<h1 className="text-[#402E32] font-bold -mr-47">
|
||||
اسپرسو آفوگاتو
|
||||
</h1>
|
||||
<img src={Coffee2} alt="Logo" className="mt-5"/>
|
||||
<div className="flex justify-between gap-50 mt-3 text-[#66585b] font-medium">
|
||||
<span>قیمت</span>
|
||||
<span>118.000</span>
|
||||
</div>
|
||||
<span
|
||||
className="font-light text-[#66585b] mt-2 mb-10 break-words -mr-23 text-[14.90px]">
|
||||
اسپرسو، یک اسکوپ بستنی وانیلی
|
||||
</span>
|
||||
<hr className=" mt- w-[90%] border-3 rounded-4xl text-[#e6e2de]"/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="mt-10 flex items-center flex-col justify-center w-[320px] h-[391px] transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md">
|
||||
<h1 className="text-[#402E32] font-bold -mr-47">
|
||||
اسپرسو آفوگاتو
|
||||
</h1>
|
||||
<img src={Coffee2} alt="Logo" className="mt-5"/>
|
||||
<div className="flex justify-between gap-50 mt-3 text-[#66585b] font-medium">
|
||||
<span>قیمت</span>
|
||||
<span>118.000</span>
|
||||
<hr className=" mt- w-[90%] border-3 rounded-4xl text-[#e6e2de]"/>
|
||||
</div>
|
||||
<span
|
||||
className="font-light text-[#66585b] mt-2 mb-10 break-words -mr-23 text-[14.90px]">
|
||||
|
||||
<div
|
||||
className="mt-10 flex items-center flex-col justify-center w-[320px] h-[391px] transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md">
|
||||
<h1 className="text-[#402E32] font-bold -mr-47">
|
||||
اسپرسو آفوگاتو
|
||||
</h1>
|
||||
<img src={Coffee2} alt="Logo" className="mt-5"/>
|
||||
<div className="flex justify-between gap-50 mt-3 text-[#66585b] font-medium">
|
||||
<span>قیمت</span>
|
||||
<span>118.000</span>
|
||||
</div>
|
||||
<span
|
||||
className="font-light text-[#66585b] mt-2 mb-10 break-words -mr-23 text-[14.90px]">
|
||||
اسپرسو، یک اسکوپ بستنی وانیلی
|
||||
</span>
|
||||
<hr className=" mt- w-[90%] border-3 rounded-4xl text-[#e6e2de]"/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="mt-10 flex items-center flex-col justify-center w-[320px] h-[391px] transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md">
|
||||
<h1 className="text-[#402E32] font-bold -mr-47">
|
||||
اسپرسو آفوگاتو
|
||||
</h1>
|
||||
<img src={Coffee2} alt="Logo" className="mt-5"/>
|
||||
<div className="flex justify-between gap-50 mt-3 text-[#66585b] font-medium">
|
||||
<span>قیمت</span>
|
||||
<span>118.000</span>
|
||||
</div>
|
||||
<span
|
||||
className="font-light text-[#66585b] mt-2 mb-10 break-words -mr-23 text-[14.90px]">
|
||||
اسپرسو، یک اسکوپ بستنی وانیلی
|
||||
</span>
|
||||
<hr className=" mt- w-[90%] border-3 rounded-4xl text-[#e6e2de]"/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="mt-10 flex items-center flex-col justify-center w-[320px] h-[391px] transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md">
|
||||
<h1 className="text-[#402E32] font-bold -mr-47">
|
||||
اسپرسو آفوگاتو
|
||||
</h1>
|
||||
<img src={Coffee2} alt="Logo" className="mt-5"/>
|
||||
<div className="flex justify-between gap-50 mt-3 text-[#66585b] font-medium">
|
||||
<span>قیمت</span>
|
||||
<span>118.000</span>
|
||||
<hr className=" mt- w-[90%] border-3 rounded-4xl text-[#e6e2de]"/>
|
||||
</div>
|
||||
|
||||
<span
|
||||
className="font-light text-[#66585b] mt-2 mb-10 break-words -mr-23 text-[14.90px]">
|
||||
<div
|
||||
className="mt-10 flex items-center flex-col justify-center w-[320px] h-[391px] transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md">
|
||||
<h1 className="text-[#402E32] font-bold -mr-47">
|
||||
اسپرسو آفوگاتو
|
||||
</h1>
|
||||
<img src={Coffee2} alt="Logo" className="mt-5"/>
|
||||
<div className="flex justify-between gap-50 mt-3 text-[#66585b] font-medium">
|
||||
<span>قیمت</span>
|
||||
<span>118.000</span>
|
||||
</div>
|
||||
<span
|
||||
className="font-light text-[#66585b] mt-2 mb-10 break-words -mr-23 text-[14.90px]">
|
||||
اسپرسو، یک اسکوپ بستنی وانیلی
|
||||
</span>
|
||||
<hr className=" mt- w-[90%] border-3 rounded-4xl text-[#e6e2de]"/>
|
||||
<hr className=" mt- w-[90%] border-3 rounded-4xl text-[#e6e2de]"/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="mt-10 flex items-center flex-col justify-center w-[320px] h-[391px] transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md">
|
||||
<h1 className="text-[#402E32] font-bold -mr-47">
|
||||
اسپرسو آفوگاتو
|
||||
</h1>
|
||||
<img src={Coffee2} alt="Logo" className="mt-5"/>
|
||||
<div className="flex justify-between gap-50 mt-3 text-[#66585b] font-medium">
|
||||
<span>قیمت</span>
|
||||
<span>118.000</span>
|
||||
</div>
|
||||
|
||||
<span
|
||||
className="font-light text-[#66585b] mt-2 mb-10 break-words -mr-23 text-[14.90px]">
|
||||
اسپرسو، یک اسکوپ بستنی وانیلی
|
||||
</span>
|
||||
<hr className=" mt- w-[90%] border-3 rounded-4xl text-[#e6e2de]"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default EditCafe;
|
||||
|
||||
// import React from "react";
|
||||
// import Search from "../assets/icons/search.svg";
|
||||
// import Arrow from "../assets/icons/arrow.svg";
|
||||
// import Vector7 from "../assets/icons/Vector7.svg";
|
||||
// import Pic from "../assets/icons/pic.png";
|
||||
|
||||
// const Header = () => {
|
||||
// return (
|
||||
// <header className="flex items-center justify-between gap-4 mb-6 mt-90">
|
||||
// <h3 className="text-[#402E32] w-[90%] font-bold mt-6">{title}</h3>
|
||||
// <div className="w-12 h-10 border-2 border-[#8B8886] flex justify-center items-center rounded-2xl bg-[#E6DBCC]">
|
||||
// <img src={Search} alt="لوگو" />
|
||||
// </div>
|
||||
// <div className="w-35 h-10 border-2 border-[#8B8886] flex justify-center items-center rounded-2xl bg-[#E6DBCC]">
|
||||
// <img src={Pic} className="w-10 h-10 shadow-2xl ml-1" alt="لوگو" />
|
||||
// <p className="text-[#402E32] -mt-1.5 pl-1.5">سارا راد</p>
|
||||
// <img src={Arrow} alt="لوگو" />
|
||||
// </div>
|
||||
// <img src={Vector7} alt="لوگو" />
|
||||
// <h1>hello!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</h1>
|
||||
// </header>
|
||||
// );
|
||||
// };
|
||||
|
||||
// export default Header;
|
||||
export default EditCafe;
|
||||
|
|
@ -1,7 +1,211 @@
|
|||
import React, { useState } from 'react';
|
||||
import Loginpic from '../../assets/image/loginpic.jpg';
|
||||
import { FiLock } from 'react-icons/fi';
|
||||
import { HiOutlineDevicePhoneMobile } from "react-icons/hi2";
|
||||
import axios from 'axios';
|
||||
import LogoDM from "../../assets/icons/LogoDM.svg";
|
||||
|
||||
const Login = () => {
|
||||
const [phoneNumber, setPhoneNumber] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
const handlePhoneChange = (e) => {
|
||||
const value = e.target.value;
|
||||
// فقط اجازه ورود اعداد
|
||||
if (value === '' || /^[0-9\b]+$/.test(value)) {
|
||||
// محدود کردن به 11 رقم
|
||||
if (value.length <= 11) {
|
||||
setPhoneNumber(value);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleLogin = (e) => {
|
||||
e.preventDefault();
|
||||
setError('');
|
||||
setLoading(true);
|
||||
|
||||
// آمادهسازی داده برای ارسال
|
||||
const loginData = {
|
||||
userName: phoneNumber,
|
||||
password: password
|
||||
};
|
||||
|
||||
// ارسال درخواست به API
|
||||
axios.post('/api/admin/v1/login', loginData)
|
||||
.then((response) => {
|
||||
setLoading(false);
|
||||
console.log('Login successful:', response.data);
|
||||
|
||||
// ذخیره توکن در localStorage
|
||||
if (response.data.token) {
|
||||
localStorage.setItem('token', response.data.token);
|
||||
}
|
||||
|
||||
// هدایت به صفحه داشبورد یا صفحه اصلی
|
||||
// window.location.href = '/dashboard';
|
||||
alert('ورود موفقیتآمیز بود!');
|
||||
})
|
||||
.catch((error) => {
|
||||
setLoading(false);
|
||||
console.error('Login error:', error);
|
||||
|
||||
// مدیریت خطاها
|
||||
if (error.response) {
|
||||
// سرور پاسخ داد اما با خطا
|
||||
setError(error.response.data.message || 'نام کاربری یا رمز عبور اشتباه است');
|
||||
} else if (error.request) {
|
||||
// درخواست ارسال شد اما پاسخی دریافت نشد
|
||||
setError('خطا در برقراری ارتباط با سرور');
|
||||
} else {
|
||||
setError('خطای نامشخص رخ داده است');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
صفحه لاگین
|
||||
<div className="relative h-screen" dir="rtl">
|
||||
<div className="absolute top-0 left-0 right-0 bg-white z-10 shadow-sm">
|
||||
<div className="flex items-center justify-between px-8 py-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex justify-center">
|
||||
<img src={LogoDM} className="h-12 w-12" alt="Logo" />
|
||||
</div>
|
||||
<div className="relative">
|
||||
<select className="appearance-none px-6 py-2 pr-4 pl-10 bg-white border-2 border-gray-300 rounded-xl text-sm focus:outline-none focus:border-[#7f4629] transition-colors cursor-pointer">
|
||||
<option>شهر</option>
|
||||
<option>تهران</option>
|
||||
<option>اصفهان</option>
|
||||
<option>شیراز</option>
|
||||
<option>مشهد</option>
|
||||
</select>
|
||||
<svg
|
||||
className="absolute left-4 top-5 -translate-y-1/2 w-6 h-10 text-gray-500 pointer-events-none"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center font-bold gap-16 text-[#402E32]">
|
||||
<a href="#" className="hover:text-[#7f4629] transition-colors">
|
||||
خانه
|
||||
</a>
|
||||
<a href="#" className="hover:text-[#7f4629] transition-colors">
|
||||
دسته بندی
|
||||
</a>
|
||||
<a href="#" className="hover:text-[#7f4629] transition-colors">
|
||||
تماس با ما
|
||||
</a>
|
||||
<a href="#" className="hover:text-[#7f4629] transition-colors">
|
||||
درباره ما
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<button className="px-12 py-2 bg-[#7f4629] text-white rounded-full font-medium hover:bg-[#5f494f] transition-colors">
|
||||
ثبت نام
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex h-full pt-20">
|
||||
<div className="w-1/2 flex items-start justify-start bg-[#f5f0e8] px-24 pt-16">
|
||||
<div className="w-full max-w-lg">
|
||||
<div className="flex items-center gap-2 text-sm text-gray-500 mb-8">
|
||||
<span>ورود</span>
|
||||
<span className="font-bold text-2xl">></span>
|
||||
<span>خانه</span>
|
||||
</div>
|
||||
|
||||
<div className="mb-8">
|
||||
<h2 className="text-2xl font-bold text-[#402E32] mb-2">
|
||||
ورود ادمین
|
||||
</h2>
|
||||
<p className="text-gray-700 text-sm">
|
||||
دسترسی ویژه برای مدیریت و گزارشها
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleLogin} className="space-y-6">
|
||||
{/* نمایش پیغام خطا */}
|
||||
{error && (
|
||||
<div className="bg-red-50 border-2 border-red-300 text-red-700 px-4 py-3 rounded-xl text-sm">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="relative">
|
||||
<label className="absolute -top-2.5 right-4 bg-[#f5f0e8] px-2 text-sm text-gray-600 z-10">
|
||||
شماره موبایل
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type="text"
|
||||
value={phoneNumber}
|
||||
onChange={handlePhoneChange}
|
||||
placeholder="09132659856"
|
||||
className="w-full pl-14 pr-6 py-3 border-2 border-gray-300 rounded-xl focus:outline-none focus:border-[#7f4629] transition-colors"
|
||||
dir="ltr"
|
||||
maxLength={11}
|
||||
inputMode="numeric"
|
||||
pattern="[0-9]*"
|
||||
/>
|
||||
<HiOutlineDevicePhoneMobile className="absolute left-5 top-1/2 -translate-y-1/2 text-gray-400 w-6 h-10" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<label className="absolute -top-2.5 right-4 bg-[#f5f0e8] px-2 text-sm text-gray-600 z-10">
|
||||
رمز عبور
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="2569876nb*"
|
||||
className="w-full pl-14 pr-6 py-3 border-2 border-gray-300 rounded-xl focus:outline-none focus:border-[#7f4629] transition-colors"
|
||||
dir="ltr"
|
||||
/>
|
||||
<FiLock className="absolute left-5 top-1/2 -translate-y-1/2 text-gray-400 w-6 h-10" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-right">
|
||||
<a
|
||||
href="#"
|
||||
className="text-sm text-gray-500 hover:text-[#7f4629] transition-colors"
|
||||
>
|
||||
فراموشی رمز عبور
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading || !phoneNumber || !password}
|
||||
className="w-full bg-[#7f4629] text-white py-3 rounded-full font-bold hover:bg-[#5f494f] transition-all duration-300 shadow-lg hover:shadow-xl disabled:bg-gray-400 disabled:cursor-not-allowed"
|
||||
>
|
||||
{loading ? 'در حال ورود...' : 'ورود'}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-1/2 relative overflow-hidden">
|
||||
<img
|
||||
src={Loginpic}
|
||||
alt="Coffee workspace"
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,88 +1,25 @@
|
|||
@import "tailwindcss";
|
||||
|
||||
@font-face {
|
||||
font-family: "MyEstedad";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url("/fonts/Estedad.ttf") format("truetype");
|
||||
font-family: "MyEstedad";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url("/fonts/Estedad.ttf") format("truetype");
|
||||
}
|
||||
|
||||
@theme {
|
||||
--font-MyEstedad: "MyEstedad", sans-serif;
|
||||
--font-MyEstedad: "MyEstedad", sans-serif;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
body {
|
||||
/* @apple font-MyEstedad; */
|
||||
font-family: var(--font-MyEstedad);
|
||||
}
|
||||
}
|
||||
/* :root {
|
||||
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
html {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #242424;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.2em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
background-color: #1a1a1a;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
button:hover {
|
||||
border-color: #646cff;
|
||||
}
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
a:hover {
|
||||
color: #747bff;
|
||||
}
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
} */
|
||||
body {
|
||||
/* @apple font-MyEstedad; */
|
||||
font-family: var(--font-MyEstedad);
|
||||
direction: rtl;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue