updated menu item page
This commit is contained in:
parent
50ba58e900
commit
2bf5c86db9
3 changed files with 14 additions and 8 deletions
|
@ -86,7 +86,7 @@ const CategoriesPage = () => {
|
||||||
<div className='mt-5'>
|
<div className='mt-5'>
|
||||||
<label className='-mb-1 text-gray-700 font-semibold text-sm'>Edit category</label>
|
<label className='-mb-1 text-gray-700 font-semibold text-sm'>Edit category</label>
|
||||||
{categories?.length > 0 && categories.map(c => (
|
{categories?.length > 0 && categories.map(c => (
|
||||||
<button onClick={() => {setEditCategory(c); setCategoryName(c.name)}} className='w-full flex gap-2 bg-slate-100 px-4 py-2 cursor-pointer rounded-md mb-2'>
|
<button onClick={() => {setEditCategory(c); setCategoryName(c.name)}} className='w-full p-2 flex justify-center items-center my-2 rounded-md outline-none border border-[#DCA0AE] hover:opacity-60 duration-300'>
|
||||||
<p>{c.name}</p>
|
<p>{c.name}</p>
|
||||||
</button>
|
</button>
|
||||||
))}
|
))}
|
||||||
|
|
|
@ -51,9 +51,9 @@ const NewMenuItemPage = () => {
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='px-5 mb-10'>
|
<div className='mb-10'>
|
||||||
<UserTab isAdmin={true}/>
|
<UserTab isAdmin={true}/>
|
||||||
<div className='max-w-md mx-auto mt-10'>
|
<div className='px-5 max-w-md mx-auto mt-10'>
|
||||||
<form className='mt-10' onSubmit={handleMenuFormSubmit}>
|
<form className='mt-10' onSubmit={handleMenuFormSubmit}>
|
||||||
<div className='flex flex-col gap-2 justify-center items-center max-w-[100px] mx-auto mb-5'>
|
<div className='flex flex-col gap-2 justify-center items-center max-w-[100px] mx-auto mb-5'>
|
||||||
<EditImage link={menuImg} setLink={setMenuImg}/>
|
<EditImage link={menuImg} setLink={setMenuImg}/>
|
||||||
|
@ -73,7 +73,7 @@ const NewMenuItemPage = () => {
|
||||||
<button type='submit' className='w-full bg-pink-500 text-white p-2 rounded-md hover:opacity-80 duration-300'>Save</button>
|
<button type='submit' className='w-full bg-pink-500 text-white p-2 rounded-md hover:opacity-80 duration-300'>Save</button>
|
||||||
</form>
|
</form>
|
||||||
<div className='max-w-md mx-auto mt-2'>
|
<div className='max-w-md mx-auto mt-2'>
|
||||||
<Link href={'/menu-items'} className='w-full p-2 flex justify-center items-center my-2 rounded-md outline-none border border-pink-500 hover:opacity-60 duration-300'>Show all menu items</Link>
|
<Link href={'/menu-items'} className='w-full p-2 flex justify-center items-center my-2 rounded-md outline-none border border-[#DCA0AE] hover:opacity-60 duration-300'>Show all menu items</Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -4,6 +4,7 @@ import { IoMdAddCircle } from "react-icons/io";
|
||||||
import useProfile from '../../components/UseProfile'
|
import useProfile from '../../components/UseProfile'
|
||||||
import UserTab from '../../components/layout/UserTab';
|
import UserTab from '../../components/layout/UserTab';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
|
import Image from 'next/image';
|
||||||
|
|
||||||
const MenuItemsPage = () => {
|
const MenuItemsPage = () => {
|
||||||
const {loading, data} = useProfile();
|
const {loading, data} = useProfile();
|
||||||
|
@ -26,17 +27,22 @@ const MenuItemsPage = () => {
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='px-5 mb-10'>
|
<div className='mb-10'>
|
||||||
<UserTab isAdmin={true}/>
|
<UserTab isAdmin={true}/>
|
||||||
<div className='max-w-md mx-auto mt-10'>
|
<div className='px-5 max-w-md mx-auto mt-10'>
|
||||||
<Link href={'/menu-items/new'} className='w-full border p-2 flex justify-between items-center my-2 rounded-md outline-none border-[#DCA0AE]'>Create new menu item
|
<Link href={'/menu-items/new'} className='w-full border p-2 flex justify-between items-center my-2 rounded-md outline-none border-[#DCA0AE]'>Create new menu item
|
||||||
<IoMdAddCircle className='text-lg text-pink-500'/>
|
<IoMdAddCircle className='text-lg text-pink-500'/>
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
<div className='max-w-md mx-auto'>
|
<div className='px-5 max-w-md mx-auto'>
|
||||||
<p className='mt-10 text-sm text-gray-700 -mb-2 font-semibold'>Edit menu items</p>
|
<p className='mt-10 text-sm text-gray-700 -mb-2 font-semibold'>Edit menu items</p>
|
||||||
{menuItems?.length > 0 && menuItems.map(item => (
|
{menuItems?.length > 0 && menuItems.map(item => (
|
||||||
<button className='w-full p-2 flex justify-center items-center my-2 rounded-md outline-none border border-pink-500 hover:opacity-60 duration-300'>{item.itemName}</button>
|
<Link href={'/menu-items/edit/'+item._id} className='w-full p-2 flex justify-between items-center my-2 rounded-md outline-none border border-[#DCA0AE] hover:opacity-60 duration-300 text-gray-800 font-semibold text-sm'>
|
||||||
|
<div className='relative'>
|
||||||
|
<Image src={item.menuImg} alt='menu-item-img' width={60} height={60}/>
|
||||||
|
</div>
|
||||||
|
{item.itemName}
|
||||||
|
</Link>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Add table
Reference in a new issue