Compare commits
2 Commits
ed56628cc4
...
4e4f9685a4
| Author | SHA1 | Date |
|---|---|---|
|
|
4e4f9685a4 | |
|
|
c748620429 |
Binary file not shown.
|
After Width: | Height: | Size: 97 KiB |
|
|
@ -7,12 +7,14 @@ import toggleTheme from "../ToggleTheme";
|
||||||
import { CgDarkMode } from "react-icons/cg";
|
import { CgDarkMode } from "react-icons/cg";
|
||||||
|
|
||||||
const HEADER_PATHS = [
|
const HEADER_PATHS = [
|
||||||
{ route: "/cafe-management", title: "مدیریت کافه ها" },
|
"/management",
|
||||||
{route: "/users-management", title: "مدیریت کاربران" },
|
"/management/",
|
||||||
{ route: "/dashboard", title: "داشبورد" },
|
"/management/cafes",
|
||||||
{ route: "/stats", title: "آمار و تحلیل" },
|
"/edit-cafe",
|
||||||
{ route: "/edit-cafe/", title: "ویرایش کافه" },
|
"/edit-cafe/",
|
||||||
|
"/cafe",
|
||||||
|
"/cafes",
|
||||||
|
"/admin",
|
||||||
];
|
];
|
||||||
|
|
||||||
export default function Layout() {
|
export default function Layout() {
|
||||||
|
|
|
||||||
|
|
@ -29,7 +29,9 @@ const CafeManagement = () => {
|
||||||
console.error("❌ Error loading cafes:", error);
|
console.error("❌ Error loading cafes:", error);
|
||||||
const errorMessage =
|
const errorMessage =
|
||||||
error.response?.data?.message ||
|
error.response?.data?.message ||
|
||||||
(error.request ? "خطا در برقراری ارتباط با سرور" : "خطای نامشخص رخ داده است");
|
(error.request
|
||||||
|
? "خطا در برقراری ارتباط با سرور"
|
||||||
|
: "خطای نامشخص رخ داده است");
|
||||||
setError(errorMessage);
|
setError(errorMessage);
|
||||||
} finally {
|
} finally {
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
|
|
@ -43,7 +45,9 @@ const CafeManagement = () => {
|
||||||
if (loading) {
|
if (loading) {
|
||||||
return (
|
return (
|
||||||
<div className="flex justify-center items-center h-screen">
|
<div className="flex justify-center items-center h-screen">
|
||||||
<div className="text-button1 text-xl font-bold">در حال بارگذاری...</div>
|
<div className="text-button1 text-xl font-bold">
|
||||||
|
در حال بارگذاری...
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
@ -127,7 +131,10 @@ const CafeManagement = () => {
|
||||||
{/* کارت موبایل */}
|
{/* کارت موبایل */}
|
||||||
<div className="lg:hidden mt-6 space-y-4">
|
<div className="lg:hidden mt-6 space-y-4">
|
||||||
{cafes.map((cafe) => (
|
{cafes.map((cafe) => (
|
||||||
<div key={cafe._id} className="bg-white border-2 border-[#8b8886] rounded-xl p-4">
|
<div
|
||||||
|
key={cafe._id}
|
||||||
|
className="bg-white border-2 border-[#8b8886] rounded-xl p-4"
|
||||||
|
>
|
||||||
<div className="flex items-start gap-4 mb-4">
|
<div className="flex items-start gap-4 mb-4">
|
||||||
<img
|
<img
|
||||||
src={cafe.photo || Pic1}
|
src={cafe.photo || Pic1}
|
||||||
|
|
@ -135,8 +142,12 @@ const CafeManagement = () => {
|
||||||
className="w-16 h-16 rounded-full object-cover flex-shrink-0"
|
className="w-16 h-16 rounded-full object-cover flex-shrink-0"
|
||||||
/>
|
/>
|
||||||
<div className="flex-1 min-w-0">
|
<div className="flex-1 min-w-0">
|
||||||
<h3 className="font-bold text-[#402E32] mb-1 text-sm">{cafe.Name}</h3>
|
<h3 className="font-bold text-[#402E32] mb-1 text-sm">
|
||||||
<p className="text-xs text-gray-600 truncate">{cafe.address}</p>
|
{cafe.Name}
|
||||||
|
</h3>
|
||||||
|
<p className="text-xs text-gray-600 truncate">
|
||||||
|
{cafe.address}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -147,7 +158,9 @@ const CafeManagement = () => {
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-1">
|
<div className="flex items-center gap-1">
|
||||||
<img src={Group} alt="time" className="w-4 h-4" />
|
<img src={Group} alt="time" className="w-4 h-4" />
|
||||||
<span className="text-[#402E32]">{cafe.openinghour || "نامشخص"}</span>
|
<span className="text-[#402E32]">
|
||||||
|
{cafe.openinghour || "نامشخص"}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -176,7 +189,9 @@ const CafeManagement = () => {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* عنوان */}
|
{/* عنوان */}
|
||||||
<h1 className="text-[#402E32] font-bold text-lg lg:text-xl mb-6">کافه های شما</h1>
|
<h1 className="text-[#402E32] font-bold text-lg lg:text-xl mb-6">
|
||||||
|
کافه های شما
|
||||||
|
</h1>
|
||||||
|
|
||||||
{/* محتوای اصلی */}
|
{/* محتوای اصلی */}
|
||||||
{renderContent()}
|
{renderContent()}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,43 @@
|
||||||
|
import { FaRegEdit } from "react-icons/fa";
|
||||||
|
|
||||||
|
export default function CoffeeCard({
|
||||||
|
title,
|
||||||
|
description,
|
||||||
|
price,
|
||||||
|
image,
|
||||||
|
onEdit,
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="bg-white border border-gray-200 rounded-2xl p-4
|
||||||
|
hover:shadow-lg transition-all duration-300"
|
||||||
|
>
|
||||||
|
{/* تصویر */}
|
||||||
|
<img
|
||||||
|
src={image}
|
||||||
|
alt={title}
|
||||||
|
className="w-full h-40 object-cover rounded-xl mb-3"
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* عنوان */}
|
||||||
|
<h3 className="font-bold text-text1 text-base mb-2">{title}</h3>
|
||||||
|
|
||||||
|
{/* توضیح */}
|
||||||
|
<p className="text-sm text-gray-500 mb-3 line-clamp-2">{description}</p>
|
||||||
|
|
||||||
|
{/* فوتر */}
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<span className="font-bold text-text1">{price} تومان</span>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={onEdit}
|
||||||
|
className="flex items-center gap-1 text-sm
|
||||||
|
text-button1 hover:text-[#5f494f] transition-colors"
|
||||||
|
>
|
||||||
|
<FaRegEdit />
|
||||||
|
ویرایش
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -4,6 +4,8 @@ import { GrLocation } from "react-icons/gr";
|
||||||
import { BiEdit } from "react-icons/bi";
|
import { BiEdit } from "react-icons/bi";
|
||||||
import { FaRegStar } from "react-icons/fa";
|
import { FaRegStar } from "react-icons/fa";
|
||||||
import { IoMdCheckmark, IoMdClose } from "react-icons/io";
|
import { IoMdCheckmark, IoMdClose } from "react-icons/io";
|
||||||
|
import { FaRegEdit } from "react-icons/fa";
|
||||||
|
import EditCafeMenu from "./EditCafeMenu";
|
||||||
|
|
||||||
// Assets
|
// Assets
|
||||||
import Bg1 from "../../assets/icons/bg1.svg";
|
import Bg1 from "../../assets/icons/bg1.svg";
|
||||||
|
|
@ -47,13 +49,15 @@ const CAFE_PRODUCTS = [
|
||||||
name: "اسپرسو100%",
|
name: "اسپرسو100%",
|
||||||
price: "118.000",
|
price: "118.000",
|
||||||
image: Sperso,
|
image: Sperso,
|
||||||
description: "45 میلی لیتر، قهوه، 100% عربیکا، دم شده با دستگاه اسپرسو ساز، به همراه یک عدد آب معدنی مینی",
|
description:
|
||||||
|
"45 میلی لیتر، قهوه، 100% عربیکا، دم شده با دستگاه اسپرسو ساز، به همراه یک عدد آب معدنی مینی",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "کارامل ماکیاتو",
|
name: "کارامل ماکیاتو",
|
||||||
price: "149.000",
|
price: "149.000",
|
||||||
image: Coffee1,
|
image: Coffee1,
|
||||||
description: "220 میلی لیتر، 2 شات اسپرسو 30% روبوستا، 70% عربیکا، یک لکه فوم شیر، سیروپ کارامل",
|
description:
|
||||||
|
"220 میلی لیتر، 2 شات اسپرسو 30% روبوستا، 70% عربیکا، یک لکه فوم شیر، سیروپ کارامل",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "اسپرسو آفوگاتو",
|
name: "اسپرسو آفوگاتو",
|
||||||
|
|
@ -66,6 +70,7 @@ const CAFE_PRODUCTS = [
|
||||||
export default function EditCafe() {
|
export default function EditCafe() {
|
||||||
const { id } = useParams();
|
const { id } = useParams();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
const [editmenu, setEditMenu] = useState(false);
|
||||||
|
|
||||||
// State Management
|
// State Management
|
||||||
const [cafeData, setCafeData] = useState(null);
|
const [cafeData, setCafeData] = useState(null);
|
||||||
|
|
@ -111,7 +116,9 @@ export default function EditCafe() {
|
||||||
console.error("❌ Error loading cafe:", error);
|
console.error("❌ Error loading cafe:", error);
|
||||||
const errorMessage =
|
const errorMessage =
|
||||||
error.response?.data?.message ||
|
error.response?.data?.message ||
|
||||||
(error.request ? "خطا در برقراری ارتباط با سرور" : "خطای نامشخص رخ داده است");
|
(error.request
|
||||||
|
? "خطا در برقراری ارتباط با سرور"
|
||||||
|
: "خطای نامشخص رخ داده است");
|
||||||
setError(errorMessage);
|
setError(errorMessage);
|
||||||
} finally {
|
} finally {
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
|
|
@ -161,7 +168,9 @@ export default function EditCafe() {
|
||||||
if (loading) {
|
if (loading) {
|
||||||
return (
|
return (
|
||||||
<div className="flex justify-center items-center h-screen">
|
<div className="flex justify-center items-center h-screen">
|
||||||
<div className="text-button1 text-2xl font-bold">در حال بارگذاری...</div>
|
<div className="text-button1 text-2xl font-bold">
|
||||||
|
در حال بارگذاری...
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
@ -178,21 +187,25 @@ export default function EditCafe() {
|
||||||
|
|
||||||
if (!cafeData) {
|
if (!cafeData) {
|
||||||
return (
|
return (
|
||||||
<div className="p-6 text-center text-gray-500">
|
<div className="p-6 text-center text-gray-500">اطلاعات کافه یافت نشد</div>
|
||||||
اطلاعات کافه یافت نشد
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section dir="rtl" className="w-full overflow-x-hidden">
|
<section dir="rtl" className="w-full overflow-x-hidden">
|
||||||
|
{editmenu ? (
|
||||||
|
<EditCafeMenu setEditMenu={setEditMenu} />
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
<style>{`
|
<style>{`
|
||||||
.scrollbar-hide::-webkit-scrollbar { display: none; }
|
.scrollbar-hide::-webkit-scrollbar { display: none; }
|
||||||
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
|
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
|
||||||
`}</style>
|
`}</style>
|
||||||
|
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
<h1 className="text-[#402E32] font-bold text-lg lg:text-xl mb-6">ادیت {cafeData.Name}</h1>
|
<h1 className="text-[#402E32] font-bold text-lg lg:text-xl mb-6">
|
||||||
|
ادیت {cafeData.Name}
|
||||||
|
</h1>
|
||||||
|
|
||||||
{/* Main Container */}
|
{/* Main Container */}
|
||||||
<div className="border-2 mt-1 border-[#8b8886] p-4 md:p-6 lg:p-10 rounded-2xl">
|
<div className="border-2 mt-1 border-[#8b8886] p-4 md:p-6 lg:p-10 rounded-2xl">
|
||||||
|
|
@ -225,45 +238,70 @@ export default function EditCafe() {
|
||||||
{/* Basic Info */}
|
{/* Basic Info */}
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<div>
|
<div>
|
||||||
<h2 className="font-bold text-lg text-[#402E32] mb-2">{cafeData.Name}</h2>
|
<h2 className="font-bold text-lg text-[#402E32] mb-2">
|
||||||
|
{cafeData.Name}
|
||||||
|
</h2>
|
||||||
<div className="w-16 h-1 bg-[#80931e] rounded-full"></div>
|
<div className="w-16 h-1 bg-[#80931e] rounded-full"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex items-center gap-3 text-[#402E32]">
|
<div className="flex items-center gap-3 text-[#402E32]">
|
||||||
<GrLocation className="text-lg flex-shrink-0" />
|
<GrLocation className="text-lg flex-shrink-0" />
|
||||||
<span className="text-sm md:text-base">{cafeData.address || "آدرس موجود نیست"}</span>
|
<span className="text-sm md:text-base">
|
||||||
|
{cafeData.address || "آدرس موجود نیست"}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex items-center gap-3 text-[#402E32]">
|
<div className="flex items-center gap-3 text-[#402E32]">
|
||||||
<FaRegStar className="text-lg flex-shrink-0" />
|
<FaRegStar className="text-lg flex-shrink-0" />
|
||||||
<span className="text-sm md:text-base">{cafeData.rating || 0}</span>
|
<span className="text-sm md:text-base">
|
||||||
|
{cafeData.rating || 0}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<h3 className="font-bold text-[#402E32] mb-2">درباره کافه</h3>
|
<h3 className="font-bold text-[#402E32] mb-2">
|
||||||
|
درباره کافه
|
||||||
|
</h3>
|
||||||
<p className="text-sm md:text-base text-[#555]">
|
<p className="text-sm md:text-base text-[#555]">
|
||||||
{cafeData.description || "توضیحاتی برای این کافه وجود ندارد."}
|
{cafeData.description ||
|
||||||
|
"توضیحاتی برای این کافه وجود ندارد."}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={() => setEditMenu(true)}
|
||||||
|
className="flex items-center justify-center text-text1 gap-2 w-full h-14 border-4 border-border mb-14 rounded-4xl font-bold"
|
||||||
|
>
|
||||||
|
<FaRegEdit size={20} />
|
||||||
|
ادیت منو کافه
|
||||||
|
</button>
|
||||||
|
|
||||||
{/* Features Section */}
|
{/* Features Section */}
|
||||||
<div className="mb-8">
|
<div className="mb-8">
|
||||||
<h2 className="font-bold text-[#402E32] mb-4 text-base md:text-lg">ویژگی ها</h2>
|
<h2 className="font-bold text-[#402E32] mb-4 text-base md:text-lg">
|
||||||
|
ویژگی ها
|
||||||
|
</h2>
|
||||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
|
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
|
||||||
{CAFE_FEATURES.map((feature, idx) => (
|
{CAFE_FEATURES.map((feature, idx) => (
|
||||||
<div
|
<div
|
||||||
key={idx}
|
key={idx}
|
||||||
className="bg-[#e1d5c2] p-4 rounded-2xl flex flex-col items-center gap-3 text-center transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md"
|
className="bg-[#e1d5c2] p-4 rounded-2xl flex flex-col items-center gap-3 text-center transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md"
|
||||||
>
|
>
|
||||||
<img src={feature.icon} alt={feature.label} className="w-6 h-6" />
|
<img
|
||||||
|
src={feature.icon}
|
||||||
|
alt={feature.label}
|
||||||
|
className="w-6 h-6"
|
||||||
|
/>
|
||||||
<span className="text-[#402E32] font-medium text-xs md:text-sm whitespace-normal">
|
<span className="text-[#402E32] font-medium text-xs md:text-sm whitespace-normal">
|
||||||
{feature.label}
|
{feature.label}
|
||||||
</span>
|
</span>
|
||||||
{feature.value && (
|
{feature.value && (
|
||||||
<span className="text-[#402E32] text-xs">{feature.value}</span>
|
<span className="text-[#402E32] text-xs">
|
||||||
|
{feature.value}
|
||||||
|
</span>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
|
|
@ -276,14 +314,20 @@ export default function EditCafe() {
|
||||||
{/* Categories Section */}
|
{/* Categories Section */}
|
||||||
<div className="mb-8">
|
<div className="mb-8">
|
||||||
<div className="flex items-center justify-between mb-4">
|
<div className="flex items-center justify-between mb-4">
|
||||||
<h2 className="font-bold text-[#402E32] text-base md:text-lg">دستهبندیها</h2>
|
<h2 className="font-bold text-[#402E32] text-base md:text-lg">
|
||||||
|
دستهبندیها
|
||||||
|
</h2>
|
||||||
<button
|
<button
|
||||||
onClick={() => setIsEditMode(!isEditMode)}
|
onClick={() => setIsEditMode(!isEditMode)}
|
||||||
className="flex items-center gap-2 text-button1 hover:text-[#5f494f] transition-colors"
|
className="flex items-center gap-2 text-button1 hover:text-[#5f494f] transition-colors"
|
||||||
title={isEditMode ? "خروج از حالت ویرایش" : "ویرایش دستهبندیها"}
|
title={
|
||||||
|
isEditMode ? "خروج از حالت ویرایش" : "ویرایش دستهبندیها"
|
||||||
|
}
|
||||||
>
|
>
|
||||||
<img src={Vector16} alt="ویرایش" className="w-5 h-5" />
|
<img src={Vector16} alt="ویرایش" className="w-5 h-5" />
|
||||||
<span className="text-sm md:text-base">{isEditMode ? "تمام" : "ویرایش"}</span>
|
<span className="text-sm md:text-base">
|
||||||
|
{isEditMode ? "تمام" : "ویرایش"}
|
||||||
|
</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -313,11 +357,13 @@ export default function EditCafe() {
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className={`flex items-center gap-2 px-3 py-2 rounded-lg text-[#402E32] text-xs md:text-sm whitespace-nowrap ${
|
<div
|
||||||
|
className={`flex items-center gap-2 px-3 py-2 rounded-lg text-[#402E32] text-xs md:text-sm whitespace-nowrap ${
|
||||||
isEditMode
|
isEditMode
|
||||||
? "bg-gray-100 hover:bg-gray-200"
|
? "bg-gray-100 hover:bg-gray-200"
|
||||||
: "bg-[#e1d5c2]"
|
: "bg-[#e1d5c2]"
|
||||||
} transition-colors`}>
|
} transition-colors`}
|
||||||
|
>
|
||||||
<span>{category}</span>
|
<span>{category}</span>
|
||||||
{isEditMode && (
|
{isEditMode && (
|
||||||
<>
|
<>
|
||||||
|
|
@ -379,18 +425,28 @@ export default function EditCafe() {
|
||||||
|
|
||||||
{/* Products Section */}
|
{/* Products Section */}
|
||||||
<div>
|
<div>
|
||||||
<h2 className="font-bold text-[#402E32] mb-4 text-base md:text-lg">محصولات</h2>
|
<h2 className="font-bold text-[#402E32] mb-4 text-base md:text-lg">
|
||||||
|
محصولات
|
||||||
|
</h2>
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
|
||||||
{CAFE_PRODUCTS.map((product, idx) => (
|
{CAFE_PRODUCTS.map((product, idx) => (
|
||||||
<div
|
<div
|
||||||
key={idx}
|
key={idx}
|
||||||
className="bg-white border border-gray-200 rounded-xl p-4 transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md"
|
className="bg-white border border-gray-200 rounded-xl p-4 transform hover:-translate-y-1 transition-all duration-300 hover:shadow-md"
|
||||||
>
|
>
|
||||||
<h3 className="font-bold text-[#402E32] text-sm md:text-base mb-3">{product.name}</h3>
|
<h3 className="font-bold text-[#402E32] text-sm md:text-base mb-3">
|
||||||
<img src={product.image} alt={product.name} className="w-full h-40 object-cover rounded-lg mb-3" />
|
{product.name}
|
||||||
|
</h3>
|
||||||
|
<img
|
||||||
|
src={product.image}
|
||||||
|
alt={product.name}
|
||||||
|
className="w-full h-40 object-cover rounded-lg mb-3"
|
||||||
|
/>
|
||||||
<div className="flex justify-between items-center mb-3 text-sm">
|
<div className="flex justify-between items-center mb-3 text-sm">
|
||||||
<span className="text-[#66585b]">قیمت:</span>
|
<span className="text-[#66585b]">قیمت:</span>
|
||||||
<span className="font-medium text-[#402E32]">{product.price}</span>
|
<span className="font-medium text-[#402E32]">
|
||||||
|
{product.price}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<p className="text-xs md:text-sm text-[#66585b] line-clamp-3">
|
<p className="text-xs md:text-sm text-[#66585b] line-clamp-3">
|
||||||
{product.description}
|
{product.description}
|
||||||
|
|
@ -400,6 +456,8 @@ export default function EditCafe() {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,124 @@
|
||||||
|
import { useState } from "react";
|
||||||
|
import { CgAddR } from "react-icons/cg";
|
||||||
|
import { PiCoffee } from "react-icons/pi";
|
||||||
|
import { FaRegEdit } from "react-icons/fa";
|
||||||
|
import CoffeeCard from "./Component/CoffeeCard";
|
||||||
|
import coffee12 from "../../assets/image/coffee12.png";
|
||||||
|
|
||||||
|
const DEFAULT_CATEGORIES = [
|
||||||
|
"نوشیدنی سرد",
|
||||||
|
"نوشیدنی گرم",
|
||||||
|
"کیک و دسر",
|
||||||
|
"صبحانه",
|
||||||
|
"ساندویچ و برگر",
|
||||||
|
"سالاد و پیش غذا",
|
||||||
|
];
|
||||||
|
const PRODUCTS = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
title: "اسپرسو",
|
||||||
|
description: "قهوه 100٪ عربیکا با عطر بالا",
|
||||||
|
price: "118,000",
|
||||||
|
image: coffee12,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
title: "لاته",
|
||||||
|
description: "شیر بخار داده شده + اسپرسو",
|
||||||
|
price: "135,000",
|
||||||
|
image: coffee12,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
title: "کاپوچینو",
|
||||||
|
description: "کلاسیک ایتالیایی با فوم شیر",
|
||||||
|
price: "142,000",
|
||||||
|
image: coffee12,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function EditCafeMenu({ setEditMenu }) {
|
||||||
|
const [selectedCategory, setSelectedCategory] = useState(null);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h1 className="text-bold text-2xl text-text1">ادیت منو کافه</h1>
|
||||||
|
|
||||||
|
<div className="flex gap-3 justify-end mb-6">
|
||||||
|
<button
|
||||||
|
onClick={() => setEditMenu(false)}
|
||||||
|
className="px-4 md:px-6 py-2 border-2 border-[#bb8f70] text-[#402e32] rounded-3xl
|
||||||
|
hover:bg-button1 hover:text-white hover:border-button1
|
||||||
|
transition-all duration-300 text-sm md:text-base font-medium"
|
||||||
|
>
|
||||||
|
انصراف
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
className="px-4 md:px-6 py-2 bg-button1 text-white rounded-3xl
|
||||||
|
hover:bg-[#5f494f] transition-all duration-300
|
||||||
|
text-sm md:text-base font-medium"
|
||||||
|
>
|
||||||
|
تایید
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex mt-10 border-b-2 border-border pb-2 relative">
|
||||||
|
<div className="flex items-center gap-1 text-text1">
|
||||||
|
<CgAddR />
|
||||||
|
<p>عنوان</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex mr-6 gap-4 relative">
|
||||||
|
{DEFAULT_CATEGORIES.map((cat, index) => (
|
||||||
|
<button
|
||||||
|
key={index}
|
||||||
|
onClick={() => setSelectedCategory(cat)}
|
||||||
|
className={`relative -bottom-[2px] pb-2 text-sm md:text-base transition-all
|
||||||
|
${
|
||||||
|
selectedCategory === cat
|
||||||
|
? "text-text1 font-bold"
|
||||||
|
: "text-gray-400 hover:text-text1"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{cat}
|
||||||
|
|
||||||
|
{selectedCategory === cat && (
|
||||||
|
<span
|
||||||
|
className="absolute left-0 -bottom-[9px] w-full h-[5px]
|
||||||
|
bg-border rounded-full transition-all duration-300"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* جزئیات category انتخاب شده */}
|
||||||
|
{selectedCategory && (
|
||||||
|
<>
|
||||||
|
<div className="flex mt-8 gap-1 font-bold items-center text-center text-text1">
|
||||||
|
<CgAddR />
|
||||||
|
افزودن زیر عنوان
|
||||||
|
</div>
|
||||||
|
<div className="flex font-bold items-center text-center gap-2 mt-4">
|
||||||
|
<FaRegEdit size={30} />
|
||||||
|
<PiCoffee size={30} />
|
||||||
|
<p className="border-b-2 border-border">قهوه ها</p>
|
||||||
|
</div>
|
||||||
|
<section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
|
{PRODUCTS.map((item) => (
|
||||||
|
<CoffeeCard
|
||||||
|
key={item.id}
|
||||||
|
title={item.title}
|
||||||
|
description={item.description}
|
||||||
|
price={item.price}
|
||||||
|
image={item.image}
|
||||||
|
onEdit={() => console.log("edit", item.id)}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</section>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -7,6 +7,7 @@ import CafeManagement from '../pages/CafeManagement/CafeManagement';
|
||||||
import EditCafe from '../pages/CafeManagement/EditCafe';
|
import EditCafe from '../pages/CafeManagement/EditCafe';
|
||||||
import Stats from '../pages/Stats/Stats';
|
import Stats from '../pages/Stats/Stats';
|
||||||
|
|
||||||
|
|
||||||
export default function AppRoutes() {
|
export default function AppRoutes() {
|
||||||
return (
|
return (
|
||||||
<Routes>
|
<Routes>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue