460 lines
29 KiB
JavaScript
460 lines
29 KiB
JavaScript
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";
|
||
import {FaRegStar} from "react-icons/fa";
|
||
import {PiCoffee} from "react-icons/pi";
|
||
import {IoMdTime} from "react-icons/io";
|
||
import {LuCalendar1} from "react-icons/lu";
|
||
import Vector11 from "../../assets/icons/Vector11.svg";
|
||
import Vector12 from "../../assets/icons/Vector12.svg";
|
||
import Vector13 from "../../assets/icons/Vector13.svg";
|
||
import Vector14 from "../../assets/icons/Vector14.svg";
|
||
import Vector15 from "../../assets/icons/Vector15.svg";
|
||
import Vector9 from "../../assets/icons/Vector9.svg";
|
||
import Vector16 from "../../assets/icons/Vector16.svg";
|
||
import Sperso from "../../assets/icons/sperso.svg";
|
||
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 (
|
||
<>
|
||
<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="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">
|
||
کافه ترنج، یک کافی شاپ با محیطی دنج و دلچسب در شهر اصفهان و یکی از
|
||
ممتازترین کافی شاپهای ابن شهر است. از جمله خدمات این کافه میتوان
|
||
به اینترنت رایگان و ارائه کتابهایی برای مطالعه در داخل کافه اشاره
|
||
کرد.
|
||
</span>
|
||
<hr className="w-[104%] -mt-3 border-1 text-[#80931e]"/>
|
||
|
||
<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">
|
||
منو کافه:
|
||
</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 -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>
|
||
</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>
|
||
</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>
|
||
</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>
|
||
</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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default EditCafe; |