jtpmcdevitt/web_next
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

updated menu item page

Browse source
This commit is contained in:
Juthatip McDevitt 2024-05-18 22:11:59 -05:00
parent 50ba58e900
commit 2bf5c86db9
3 changed files with 14 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
donutshop_ecommerce/src/app/categories/page.js
View file

@ -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>
))} ))}

6
donutshop_ecommerce/src/app/menu-items/new/page.js
View file

@ -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>

14
donutshop_ecommerce/src/app/menu-items/page.js
View file

@ -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>