fix the Route and edit CafeManagement.jsx and EditCafe.jsx like figma
This commit is contained in:
parent
c0d54e1168
commit
306c3257a9
37
src/App.jsx
37
src/App.jsx
|
|
@ -1,22 +1,31 @@
|
|||
import "./styles/App.css";
|
||||
import Layout from "./components/layout/layout";
|
||||
import Management1 from "./components/features/management1";
|
||||
import CafeManagement from "./pages/CafeManagement";
|
||||
// import Header from "./components/header";
|
||||
import { BrowserRouter, Routes, Route } from "react-router-dom";
|
||||
import Login from "./pages/Login/Login";
|
||||
import Dashboard from "./pages/Dashboard/Dashboard";
|
||||
import CafeManagement from "./pages/CafeManagement/CafeManagement";
|
||||
import EditCafe from "./pages/CafeManagement/EditCafe";
|
||||
import Stats from "./pages/Stats/Stats";
|
||||
import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div dir="rtl">
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path="/" element={<Layout />}>
|
||||
<Route path="management1" element={<Management1 />} />
|
||||
<Route path="edit-cafe/:id" element={<CafeManagement />} />
|
||||
</Route>
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
</div>
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path="/login" element={<Login />} />
|
||||
|
||||
<Route path="/" element={<Layout />}>
|
||||
<Route index element={<Navigate to="/dashboard" replace />} />
|
||||
|
||||
<Route path="dashboard" element={<Dashboard />} />
|
||||
|
||||
<Route path="cafe-management" element={<CafeManagement />} />
|
||||
|
||||
<Route path="edit-cafe/:id" element={<EditCafe />} />
|
||||
|
||||
<Route path="stats" element={<Stats />} />
|
||||
</Route>
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,86 +1,110 @@
|
|||
import React from "react";
|
||||
import Vector1 from "../../assets/icons/Vector1.svg";
|
||||
import Vector2 from "../../assets/icons/Vector2.svg";
|
||||
import Vector3 from "../../assets/icons/Vector3.svg";
|
||||
import Vector4 from "../../assets/icons/Vector4.svg";
|
||||
import Vector5 from "../../assets/icons/Vector5.svg";
|
||||
import Vector6 from "../../assets/icons/Vector6.svg";
|
||||
import { Link, useLocation, useNavigate } from "react-router-dom";
|
||||
import LogoDM from "../../assets/icons/LogoDM.svg";
|
||||
import { Link } from "react-router-dom";
|
||||
import { BiBarChartAlt2 } from "react-icons/bi";
|
||||
import { AiOutlinePieChart } from "react-icons/ai";
|
||||
import { PiCoffee } from "react-icons/pi";
|
||||
import { LuSquareUser } from "react-icons/lu";
|
||||
import { HiOutlineLogout } from "react-icons/hi";
|
||||
|
||||
const Sidebar = () => {
|
||||
return (
|
||||
<aside
|
||||
dir="rtl"
|
||||
className="fixed right-0 top-0 z-50 flex h-screen w-[220px] flex-col bg-[#EFEEEE] rounded-tl-3xl rounded-bl-3xl shadow-xl border-l border-[#D9CAB3]"
|
||||
>
|
||||
<div className="flex justify-center mt-6">
|
||||
<img src={LogoDM} className="h-12 w-12" alt="Logo" />
|
||||
</div>
|
||||
const location = useLocation();
|
||||
const navigate = useNavigate();
|
||||
|
||||
<nav className="w-[85%] mr-4 mt-8 space-y-4">
|
||||
{/* داشبورد */}
|
||||
<Link
|
||||
// to="/"
|
||||
className="group relative flex items-center gap-3 rounded-xl p-3 transition-all duration-300 hover:bg-[#7F4629] hover:shadow-md"
|
||||
// چک کردن صفحه فعال
|
||||
const isActive = (path) => location.pathname === path;
|
||||
|
||||
// تابع خروج
|
||||
const handleLogout = () => {
|
||||
localStorage.removeItem("token");
|
||||
navigate("/login");
|
||||
};
|
||||
|
||||
return (
|
||||
<aside
|
||||
dir="rtl"
|
||||
className="fixed right-0 top-0 z-50 flex h-screen w-[220px] flex-col bg-[#EFEEEE] rounded-tl-3xl rounded-bl-3xl shadow-xl border-l border-[#D9CAB3]"
|
||||
>
|
||||
<BiBarChartAlt2 className="w-6 h-6 text-[#402E32] transition-colors group-hover:text-white" />
|
||||
<span className="text-[#402E32] font-medium transition-colors group-hover:text-white">
|
||||
<div className="flex justify-center mt-6">
|
||||
<img src={LogoDM} className="h-12 w-12" alt="Logo" />
|
||||
</div>
|
||||
|
||||
<nav className="w-[85%] mr-4 mt-8 space-y-4">
|
||||
{/* داشبورد */}
|
||||
<Link
|
||||
to="/dashboard"
|
||||
className={`group relative flex items-center gap-3 rounded-xl p-3 transition-all duration-300 hover:shadow-md ${
|
||||
isActive("/dashboard") ? "bg-[#7F4629] shadow-md" : "hover:bg-[#7F4629]"
|
||||
}`}
|
||||
>
|
||||
<BiBarChartAlt2
|
||||
className={`w-6 h-6 transition-colors ${
|
||||
isActive("/dashboard") ? "text-white" : "text-[#402E32] group-hover:text-white"
|
||||
}`}
|
||||
/>
|
||||
<span
|
||||
className={`font-medium transition-colors ${
|
||||
isActive("/dashboard") ? "text-white" : "text-[#402E32] group-hover:text-white"
|
||||
}`}
|
||||
>
|
||||
داشبورد
|
||||
</span>
|
||||
</Link>
|
||||
</Link>
|
||||
|
||||
{/* مدیریت کافهها */}
|
||||
<Link
|
||||
// to="/management1"
|
||||
className="group flex items-center gap-3 rounded-xl p-3 transition-all duration-300 hover:bg-[#7F4629] hover:shadow-md"
|
||||
>
|
||||
<PiCoffee className="w-6 h-6 text-[#402E32] transition-colors group-hover:text-white" />
|
||||
<span className="text-[#402E32] font-medium transition-colors group-hover:text-white">
|
||||
{/* مدیریت کافهها */}
|
||||
<Link
|
||||
to="/cafe-management"
|
||||
className={`group flex items-center gap-3 rounded-xl p-3 transition-all duration-300 hover:shadow-md ${
|
||||
isActive("/cafe-management") ? "bg-[#7F4629] shadow-md" : "hover:bg-[#7F4629]"
|
||||
}`}
|
||||
>
|
||||
<PiCoffee
|
||||
className={`w-6 h-6 transition-colors ${
|
||||
isActive("/cafe-management") ? "text-white" : "text-[#402E32] group-hover:text-white"
|
||||
}`}
|
||||
/>
|
||||
<span
|
||||
className={`font-medium transition-colors ${
|
||||
isActive("/cafe-management") ? "text-white" : "text-[#402E32] group-hover:text-white"
|
||||
}`}
|
||||
>
|
||||
مدیریت کافه ها
|
||||
</span>
|
||||
</Link>
|
||||
</Link>
|
||||
|
||||
{/* مدیریت کاربران */}
|
||||
<Link
|
||||
// to="/users"
|
||||
className="group flex items-center gap-3 rounded-xl p-3 transition-all duration-300 hover:bg-[#7F4629] hover:shadow-md"
|
||||
>
|
||||
<LuSquareUser className="w-6 h-6 text-[#402E32] transition-colors group-hover:text-white" />
|
||||
<span className="text-[#402E32] font-medium transition-colors group-hover:text-white">
|
||||
مدیریت کاربران
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
{/* آمار و تحلیل */}
|
||||
<Link
|
||||
// to="/stats"
|
||||
className="group flex items-center gap-3 rounded-xl p-3 transition-all duration-300 hover:bg-[#7F4629] hover:shadow-md"
|
||||
>
|
||||
<AiOutlinePieChart className="w-6 h-6 text-[#402E32] transition-colors group-hover:text-white" />
|
||||
<span className="text-[#402E32] font-medium transition-colors group-hover:text-white">
|
||||
{/* آمار و تحلیل */}
|
||||
<Link
|
||||
to="/stats"
|
||||
className={`group flex items-center gap-3 rounded-xl p-3 transition-all duration-300 hover:shadow-md ${
|
||||
isActive("/stats") ? "bg-[#7F4629] shadow-md" : "hover:bg-[#7F4629]"
|
||||
}`}
|
||||
>
|
||||
<AiOutlinePieChart
|
||||
className={`w-6 h-6 transition-colors ${
|
||||
isActive("/stats") ? "text-white" : "text-[#402E32] group-hover:text-white"
|
||||
}`}
|
||||
/>
|
||||
<span
|
||||
className={`font-medium transition-colors ${
|
||||
isActive("/stats") ? "text-white" : "text-[#402E32] group-hover:text-white"
|
||||
}`}
|
||||
>
|
||||
آمار و تحلیل
|
||||
</span>
|
||||
</Link>
|
||||
</Link>
|
||||
|
||||
{/* خروج */}
|
||||
<Link
|
||||
// to="/logout"
|
||||
className="group flex items-center gap-3 rounded-xl p-3 transition-all duration-300 hover:bg-[#7F4629] hover:shadow-md mt-18"
|
||||
>
|
||||
<HiOutlineLogout className="w-6 h-6 text-[#402E32] transition-colors group-hover:text-white" />
|
||||
<span className="text-[#402E32] font-medium transition-colors group-hover:text-white">
|
||||
{/* خروج */}
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="group flex items-center gap-3 rounded-xl p-3 transition-all duration-300 hover:bg-[#7F4629] hover:shadow-md mt-18 w-full text-right"
|
||||
>
|
||||
<HiOutlineLogout className="w-6 h-6 text-[#402E32] transition-colors group-hover:text-white" />
|
||||
<span className="text-[#402E32] font-medium transition-colors group-hover:text-white">
|
||||
خروج
|
||||
</span>
|
||||
</Link>
|
||||
</nav>
|
||||
</aside>
|
||||
);
|
||||
</button>
|
||||
</nav>
|
||||
</aside>
|
||||
);
|
||||
};
|
||||
|
||||
export default Sidebar;
|
||||
export default Sidebar;
|
||||
|
|
@ -1,283 +0,0 @@
|
|||
import React 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";
|
||||
|
||||
const CafeManagement = () => {
|
||||
return (
|
||||
<section>
|
||||
<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]" />
|
||||
|
||||
<button className="mt-15 flex gap-2 items-center text-center w-[133%] h-15 -mr-72 px-130 rounded-4xl border-2 border-[#7f4629] hover:bg-[#7f4629] hover:text-white transition-all duration-200 hover:border-none text-[#402e32">
|
||||
<BiEdit />
|
||||
<span className="font-bold">ادیت منو کافه</span>
|
||||
</button>
|
||||
|
||||
<h3 className="text-[#402E32] font-bold mt-10 relative -right-71">
|
||||
ویژگی ها
|
||||
</h3>
|
||||
|
||||
<div className="relative -mr-71 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-71 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-[134%] -mr-77 mt-3 border-2 rounded-3xl text-[#939393]" />
|
||||
|
||||
<div className="mt-9 flex items-center gap-2 -mr-71 text-[#a79fa1] font-bold">
|
||||
<img src={Vector16} alt="Logo" />
|
||||
<h3>افزودن زیر عنوان</h3>
|
||||
</div>
|
||||
|
||||
<div className="mt-9 flex items-center gap-2 -mr-71 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="grid grid-cols-3 gap-5 -mr-64">
|
||||
<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">اسپرسو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>
|
||||
<p className="font-normal text-[#66585b] -mr-58 mt-2">
|
||||
محتویات
|
||||
</p>
|
||||
<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>
|
||||
<p className="font-normal text-[#66585b] -mr-58 mt-2">
|
||||
محتویات
|
||||
</p>
|
||||
<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>
|
||||
<p className="font-normal text-[#66585b] -mr-58 mt-2">
|
||||
محتویات
|
||||
</p>
|
||||
<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>
|
||||
<p className="font-normal text-[#66585b] -mr-58 mt-2">
|
||||
محتویات
|
||||
</p>
|
||||
<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>
|
||||
<p className="font-normal text-[#66585b] -mr-58 mt-2">
|
||||
محتویات
|
||||
</p>
|
||||
<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>
|
||||
<p className="font-normal text-[#66585b] -mr-58 mt-2">
|
||||
محتویات sgjksldkk
|
||||
</p>
|
||||
|
||||
<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 CafeManagement;
|
||||
|
||||
// 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;
|
||||
|
|
@ -38,7 +38,7 @@ const cafes = [
|
|||
},
|
||||
];
|
||||
|
||||
const Management1 = () => {
|
||||
const CafeManagement = () => {
|
||||
return (
|
||||
<section dir="rtl" className="-mt-12">
|
||||
{/* ===== Header ===== */}
|
||||
|
|
@ -64,14 +64,14 @@ const Management1 = () => {
|
|||
<p className="-mt-0.5">افزودن شعبه جدید</p>
|
||||
<img src={Vector9} alt="لوگو" />
|
||||
</button>
|
||||
<img className="mt-8 ml-4" src={Vector8} alt="لوگو" />
|
||||
|
||||
</div>
|
||||
|
||||
{/* ===== Title ===== */}
|
||||
<h3 className="text-[#402E32] w-[90%] font-bold mt-10">کافه های شما</h3>
|
||||
|
||||
{/* ===== Table Header ===== */}
|
||||
<div className="mt-28 grid grid-cols-6 gap-x-42 bg-[#EFEEEE] px-4 py-3 rounded-xl text-[#402E32] font-medium">
|
||||
<div className="mt-10 grid grid-cols-6 gap-x-42 bg-[#EFEEEE] px-4 py-3 rounded-xl text-[#402E32] font-medium">
|
||||
<h3>لوگو</h3>
|
||||
<h3>اسم</h3>
|
||||
<h3>لوکیشن</h3>
|
||||
|
|
@ -113,9 +113,9 @@ const Management1 = () => {
|
|||
);
|
||||
};
|
||||
|
||||
export default Management1;
|
||||
export default CafeManagement;
|
||||
|
||||
// const Management1 = () => {
|
||||
// const CafeManagement = () => {
|
||||
// return (
|
||||
// <section dir="rtl" className="">
|
||||
// <header className="flex items-center gap-4">
|
||||
|
|
@ -206,4 +206,4 @@ export default Management1;
|
|||
// );
|
||||
// };
|
||||
|
||||
// export default Management1;
|
||||
// export default CafeManagement;
|
||||
|
|
@ -0,0 +1,284 @@
|
|||
import React 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";
|
||||
|
||||
const EditCafe = () => {
|
||||
return (
|
||||
<section>
|
||||
<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 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>
|
||||
</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;
|
||||
|
||||
// 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;
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
const Dashboard = () => {
|
||||
return (
|
||||
<div>
|
||||
صفحه داشبورد
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Dashboard;
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
const Login = () => {
|
||||
return (
|
||||
<div>
|
||||
صفحه لاگین
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Login;
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
const Stats = () => {
|
||||
return (
|
||||
<div>
|
||||
صفحه آمار و تحلیل
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Stats;
|
||||
Loading…
Reference in New Issue