gallery and comments added

package-lock.json

@@ -65,6 +65,7 @@
       "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.5",
@@ -1509,6 +1510,7 @@
       "integrity": "sha512-8QqtOQT5ACVlmsvKOJNEaWmRPmcojMOzCz4Hs2BGG/toAp/K38LcsMRyLp349glq5AzJbCEeimEoxaX6v/fLrA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/core": "^7.21.3",
         "@svgr/babel-preset": "8.1.0",
@@ -1949,6 +1951,7 @@
       "integrity": "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -1996,6 +1999,7 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2118,6 +2122,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -2686,6 +2691,7 @@
       "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -3924,6 +3930,7 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -3990,6 +3997,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz",
       "integrity": "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3999,6 +4007,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz",
       "integrity": "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -4027,6 +4036,7 @@
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
       "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/use-sync-external-store": "^0.0.6",
         "use-sync-external-store": "^1.4.0"
@@ -4137,7 +4147,8 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
       "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/redux-thunk": {
       "version": "3.1.0",
@@ -4316,7 +4327,8 @@
       "version": "4.1.18",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.18.tgz",
       "integrity": "sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/tapable": {
       "version": "2.3.0",
@@ -4449,6 +4461,7 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.0.tgz",
       "integrity": "sha512-dZwN5L1VlUBewiP6H9s2+B3e3Jg96D0vzN+Ry73sOefebhYr9f94wwkMNN/9ouoU8pV1BqA1d1zGk8928cx0rg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.27.0",
         "fdir": "^6.5.0",

src/assets/image/badge.svg

@@ -0,0 +1,23 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_432_12166)">
+<rect x="4" y="1" width="24" height="24" rx="6.59185" fill="#938C8A" shape-rendering="crispEdges"/>
+<g clip-path="url(#clip0_432_12166)">
+<path d="M20.2589 8.28266C19.9826 7.99016 19.5364 7.99016 19.2601 8.28266L15.7964 11.9427L12.3326 8.27516C12.0564 7.98266 11.6101 7.98266 11.3339 8.27516C11.0576 8.56766 11.0576 9.04016 11.3339 9.33266L14.7976 13.0002L11.3339 16.6677C11.0576 16.9602 11.0576 17.4327 11.3339 17.7252C11.6101 18.0177 12.0564 18.0177 12.3326 17.7252L15.7964 14.0577L19.2601 17.7252C19.5364 18.0177 19.9826 18.0177 20.2589 17.7252C20.5351 17.4327 20.5351 16.9602 20.2589 16.6677L16.7951 13.0002L20.2589 9.33266C20.5281 9.04766 20.5281 8.56766 20.2589 8.28266Z" fill="#F9F9F9"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_432_12166" x="0" y="0" width="32" height="32" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="3"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.643137 0 0 0 0 0.466667 0 0 0 0 0.364706 0 0 0 0.24 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_432_12166"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_432_12166" result="shape"/>
+</filter>
+<clipPath id="clip0_432_12166">
+<rect width="17" height="18" fill="white" transform="translate(7.2959 4)"/>
+</clipPath>
+</defs>
+</svg>

src/pages/CafeManagement/EditCafe.jsx

@@ -6,6 +6,11 @@ import { FaRegStar } from "react-icons/fa";
 import { IoMdCheckmark, IoMdClose } from "react-icons/io";
 import { FaRegEdit } from "react-icons/fa";
 import EditCafeMenu from "./EditCafeMenu";
+import { RxCross2 } from "react-icons/rx";
+import { FiPlusSquare } from "react-icons/fi";
+import { SlDislike } from "react-icons/sl";
+import { SlLike } from "react-icons/sl";
+import { RiDeleteBinLine } from "react-icons/ri";
 
 // Assets
 import Bg1 from "../../assets/icons/bg1.svg";
@@ -21,6 +26,14 @@ import Coffee2 from "../../assets/icons/coffee2.svg";
 import Coffee3 from "../../assets/icons/coffee3.svg";
 import Sperso from "../../assets/icons/sperso.svg";
 import Edit from "../../assets/icons/edit.svg";
+import coffee01 from "../../assets/image/coffee01.png";
+import coffee07 from "../../assets/image/coffee07.png";
+import coffee02 from "../../assets/image/coffee02.png";
+import coffee03 from "../../assets/image/coffee03.png";
+import coffee04 from "../../assets/image/coffee04.png";
+import coffee05 from "../../assets/image/coffee05.png";
+import coffee06 from "../../assets/image/coffee06.png";
+import defaultuser from "../../assets/image/defaultuser.jpg";
 
 // Services
 import cafeService from "../../services/cafe";
@@ -311,148 +324,163 @@ export default function EditCafe() {
               </div>
             </div>
 
-            {/* Categories Section */}
+            {/* محتوا */}
-            <div className="mb-8">
+            <div>
-              <div className="flex items-center justify-between mb-4">
+              <h3 className="font-bold text-text1">گالری تصاویر</h3>
-                <h2 className="font-bold text-[#402E32] text-base md:text-lg">
+              <div className="flex flex-cols-1 gap-3 mt-2">
-                  دسته‌بندی‌ها
+                <div className="relative">
-                </h2>
+                  <img src={coffee01} alt="cofee" />
-                <button
+                  <span className=" flex justify-center items-center absolute top-0 left-0 text-white w-5 h-5 bg-[#938C8A] rounded-sm cursor-pointer">
-                  onClick={() => setIsEditMode(!isEditMode)}
+                    <RxCross2 size={14} className=" hover:scale-120 " />
-                  className="flex items-center gap-2 text-button1 hover:text-[#5f494f] transition-colors"
-                  title={
-                    isEditMode ? "خروج از حالت ویرایش" : "ویرایش دسته‌بندی‌ها"
-                  }
-                >
-                  <img src={Vector16} alt="ویرایش" className="w-5 h-5" />
-                  <span className="text-sm md:text-base">
-                    {isEditMode ? "تمام" : "ویرایش"}
                   </span>
-                </button>
+                </div>
+                <div className="relative">
+                  <img src={coffee02} alt="cofee" />
+                  <span className=" flex justify-center items-center absolute top-0 left-0 text-white w-5 h-5 bg-[#938C8A] rounded-sm cursor-pointer">
+                    <RxCross2 size={14} className=" hover:scale-120 " />
+                  </span>
+                </div>
+                <div className="relative">
+                  <img src={coffee03} alt="cofee" />
+                  <span className=" flex justify-center items-center absolute top-0 left-0 text-white w-5 h-5 bg-[#938C8A] rounded-sm cursor-pointer">
+                    <RxCross2 size={14} className=" hover:scale-120 " />
+                  </span>
+                </div>
               </div>
 
-              <div className="categories-scroll flex gap-3 md:gap-4 overflow-x-auto scrollbar-hide pb-2">
+              <div className="flex flex-cols-1 gap-3 mt-3">
-                {categories.map((category, idx) => (
+                <div className="relative">
-                  <div key={idx} className="flex-shrink-0">
+                  <img src={coffee04} alt="cofee" />
-                    {isEditMode && editingIndex === idx ? (
+                  <span className=" flex justify-center items-center absolute top-0 left-0 text-white w-5 h-5 bg-[#938C8A] rounded-sm cursor-pointer">
-                      <div className="flex flex-col gap-2">
+                    <RxCross2 size={14} className=" hover:scale-120 " />
-                        <div className="flex gap-1">
+                  </span>
-                          <IoMdCheckmark
+                </div>
-                            onClick={handleSaveCategory}
+                <div className="relative">
-                            className="text-green-600 cursor-pointer hover:text-green-800 w-5 h-5"
+                  <img src={coffee05} alt="cofee" />
-                            title="ذخیره"
+                  <span className=" flex justify-center items-center absolute top-0 left-0 text-white w-5 h-5 bg-[#938C8A] rounded-sm cursor-pointer">
-                          />
+                    <RxCross2 size={14} className=" hover:scale-120 " />
-                          <IoMdClose
+                  </span>
-                            onClick={handleCancelEdit}
+                </div>
-                            className="text-red-600 cursor-pointer hover:text-red-800 w-5 h-5"
+                <div className="relative">
-                            title="لغو"
+                  <img src={coffee06} alt="cofee" />
-                          />
+                  <span className=" flex justify-center items-center absolute top-0 left-0 text-white w-5 h-5 bg-[#938C8A] rounded-sm cursor-pointer">
-                        </div>
+                    <RxCross2 size={14} className=" hover:scale-120 " />
-                        <input
+                  </span>
-                          type="text"
+                </div>
-                          value={editValue}
+                <div className="relative">
-                          onChange={(e) => setEditValue(e.target.value)}
+                  <img src={coffee07} alt="coffee" className="block" />
-                          className="border-2 border-[#bb8f70] rounded-lg px-2 py-1 text-xs md:text-sm focus:outline-none focus:border-button1 min-w-[100px]"
+                  <span
-                          autoFocus
+                    className="absolute top-1/2 left-1/2 
-                        />
+                   -translate-x-1/2 -translate-y-1/2
-                      </div>
+                   text-white cursor-pointer"
-                    ) : (
-                      <div
-                        className={`flex items-center gap-2 px-3 py-2 rounded-lg text-[#402E32] text-xs md:text-sm whitespace-nowrap ${
-                          isEditMode
-                            ? "bg-gray-100 hover:bg-gray-200"
-                            : "bg-[#e1d5c2]"
-                        } transition-colors`}
-                      >
-                        <span>{category}</span>
-                        {isEditMode && (
-                          <>
-                            <BiEdit
-                              onClick={() => handleEditCategory(idx)}
-                              className="text-button1 cursor-pointer hover:text-[#5f494f] w-4 h-4 ml-1"
-                              title="ویرایش"
-                            />
-                            <IoMdClose
-                              onClick={() => handleDeleteCategory(idx)}
-                              className="text-white bg-[#a79fa1] rounded cursor-pointer hover:bg-[#9a8f91] w-4 h-4"
-                              title="حذف"
-                            />
-                          </>
-                        )}
-                      </div>
-                    )}
-                  </div>
-                ))}
-
-                {isEditMode && !isAddingCategory && (
-                  <button
-                    onClick={() => setIsAddingCategory(true)}
-                    className="flex-shrink-0 text-button1 hover:text-[#5f494f] font-bold text-sm md:text-base transition-colors whitespace-nowrap"
                   >
-                    + افزودن
+                    <FiPlusSquare size={24} />
-                  </button>
+                  </span>
-                )}
+                  <span
-
+                    className="absolute top-0 left-0 
-                {isEditMode && isAddingCategory && (
+                   flex justify-center items-center
-                  <div className="flex-shrink-0 flex flex-col gap-2">
+                   w-5 h-5 bg-[#938C8A] rounded-sm cursor-pointer"
-                    <div className="flex gap-1">
+                  >
-                      <IoMdCheckmark
+                    <RxCross2 size={14} />
-                        onClick={handleAddCategory}
+                  </span>
-                        className="text-green-600 cursor-pointer hover:text-green-800 w-5 h-5"
+                </div>
-                        title="ذخیره"
-                      />
-                      <IoMdClose
-                        onClick={() => {
-                          setIsAddingCategory(false);
-                          setNewCategory("");
-                        }}
-                        className="text-red-600 cursor-pointer hover:text-red-800 w-5 h-5"
-                        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-xs md:text-sm focus:outline-none focus:border-button1 min-w-[100px]"
-                      autoFocus
-                    />
-                  </div>
-                )}
               </div>
             </div>
+            {/* کامنت */}
 
-            {/* Products Section */}
+            <div className="mt-10 gap-2 ">
-            <div>
+              <div>
-              <h2 className="font-bold text-[#402E32] mb-4 text-base md:text-lg">
+                <h3 className="font-bold text-text1">کامنت ها </h3>
-                محصولات
+              </div>
-              </h2>
+              <div className=" flex-col   bg-[#EFEEEE] flex mt-5 rounded-2xl overflow-hidden p-3 ">
-              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
+                <div className=" w-full flex justify-center ">
-                {CAFE_PRODUCTS.map((product, idx) => (
+                  <img
-                  <div
+                    className="w-20 h-20"
-                    key={idx}
+                    src={defaultuser}
-                    className="bg-white border border-gray-200 rounded-xl p-4 transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md"
+                    alt="defaultuser"
-                  >
+                  />
-                    <h3 className="font-bold text-[#402E32] text-sm md:text-base mb-3">
+                  <div className=" w-full mr-4 flex flex-col gap-3 ">
-                      {product.name}
+                    <div className="w-full flex justify-between ">
-                    </h3>
+                      <h4 font-semibold text-text1>
-                    <img
+                        روزبه سام
-                      src={product.image}
+                      </h4>
-                      alt={product.name}
+                      <p className="text-sm">2مهر</p>
-                      className="w-full h-40 object-cover rounded-lg mb-3"
-                    />
-                    <div className="flex justify-between items-center mb-3 text-sm">
-                      <span className="text-[#66585b]">قیمت:</span>
-                      <span className="font-medium text-[#402E32]">
-                        {product.price}
-                      </span>
                     </div>
-                    <p className="text-xs md:text-sm text-[#66585b] line-clamp-3">
+                    <p className=" text-[#66585B]  ">
-                      {product.description}
+                      فضای خیلی دنج و آرومی داشت، قهوه ترک‌ش فوق‌العاده بود 👌
+                      دوباره حتما میام.
                     </p>
                   </div>
-                ))}
+                </div>
+                <div className="self-end  pl-2 flex gap-2 mt-2.5 ">
+                  <span className="text-text1 text-sm font-semibold">پاسخ</span>
+                  <RiDeleteBinLine className="ml-2" />
+                  <SlLike />
+                  <SlDislike />
+                </div>
+              </div>
+              <div className=" flex-col   bg-[#EFEEEE] flex mt-5 rounded-2xl overflow-hidden p-3 ">
+                <div className=" w-full flex justify-center ">
+                  <img
+                    className="w-20 h-20"
+                    src={defaultuser}
+                    alt="defaultuser"
+                  />
+                  <div className=" w-full mr-4 flex flex-col gap-3 ">
+                    <div className="w-full flex justify-between ">
+                      <h4 font-bold text-text1>
+                        بهروز کمالی
+                      </h4>
+                      <p className="text-sm">17شهریور</p>
+                    </div>
+                    <p className=" text-[#66585B]  ">
+                      مناسب قرار کاری بود، اینترنت خوب و صندلی راحت. حتما
+                      پیشنهاد می‌کنم. برخورد پرسنل عالی بود، منو هم متنوع بود.
+                      مخصوصاً کیک هویج‌شون حرف نداشت! جای پارک سخت پیدا شد،
+                      مخصوصاً آخر هفته‌ها. مناسب قرار کاری بود، اینترنت خوب و
+                      صندلی راحت. حتما پیشنهاد می‌کنم. برخورد پرسنل عالی بود،
+                      منو هم متنوع بود.
+                    </p>
+                  </div>
+                </div>
+                <div className="self-end  pl-2 flex gap-2 mt-2.5 ">
+                  <span className="text-text1 text-sm font-semibold">پاسخ</span>
+                  <RiDeleteBinLine className="ml-2" />
+                  <SlLike />
+                  <SlDislike />
+                </div>
+              </div>
+              <div className=" flex-col   bg-[#EFEEEE] flex mt-5 rounded-2xl overflow-hidden p-3 ">
+                <div className=" w-full flex justify-center ">
+                  <img
+                    className="w-20 h-20"
+                    src={defaultuser}
+                    alt="defaultuser"
+                  />
+                  <div className=" w-full mr-4 flex flex-col gap-3 ">
+                    <div className="w-full flex justify-between ">
+                      <h4 font-semibold text-text1>
+                        سحر فلاح
+                      </h4>
+                      <p className="text-sm">5شهریور</p>
+                    </div>
+                    <p className=" text-[#66585B]  ">
+                      فضا قشنگ بود ولی سرویس‌دهی یکم طول کشید. امیدوارم دفعه بعد
+                      سریع‌تر باشن. قیمت‌ها نسبت به کیفیت قابل قبوله، فقط موسیقی
+                      پس‌زمینه یکم بلند بود.
+                    </p>
+                  </div>
+                </div>
+                <div className="self-end  pl-2 flex gap-2 mt-2.5 ">
+                  <span className="text-text1 text-sm font-semibold">پاسخ</span>
+                  <RiDeleteBinLine className="ml-2" />
+                  <SlLike />
+                  <SlDislike />
+                </div>
+              </div>
+              <div className="flex justify-between mt-8">
+                <p>29 دیدگاه</p>{" "}
+                <p className="font-bold text-text1">مشاهده بیشتر</p>{" "}
               </div>
             </div>
           </div>