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

updated menu for homepage and created menu page

Browse source
This commit is contained in:
Juthatip McDevitt 2024-05-21 17:32:34 -05:00
parent f2a2cb75d3
commit 155d17dd6c
6 changed files with 43 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
donutshop_ecommerce/src/app/api/auth/[...nextauth]/route.js
View file

@ -24,7 +24,7 @@ export const authOptions = {
},
async authorize(credentials, req) {
const email = credentials?.email;
const password = credentials?.password
const password = credentials?.password;
mongoose.connect(process.env.MONGO_URL);

12
donutshop_ecommerce/src/app/login/page.js
View file

@ -11,12 +11,12 @@ const LoginPage = () => {
const [loginInProgress, setLoginInProgreass] = useState(false);
async function handleFormSubmit(ev) {
ev.preventDefault();
setLoginInProgreass(true)
await signIn('credentials', {email, password, callbackUrl:'/'})
setLoginInProgreass(false)
ev.preventDefault();
setLoginInProgreass(true)
await signIn('credentials', {email, password, callbackUrl:'/'})
setLoginInProgreass(false)
}

11
donutshop_ecommerce/src/app/menu/page.js Normal file
View file

@ -0,0 +1,11 @@
import React from 'react'
const MenuPage = () => {
return (
<div>
This is menu page
</div>
)
}
export default MenuPage

4
donutshop_ecommerce/src/components/layout/Header.js
View file

@ -42,7 +42,7 @@ const Header = () => {
<div className='mt-5'>
<ul className="hidden md:flex flex-row gap-10 text-xs font-semibold uppercase text-[#95743D]">
<Link href='/' className="">Home</Link>
<Link href='' className="">Menu</Link>
<Link href='/menu' className="">Menu</Link>
<Link href='' className="">about</Link>
<Link href='' className="">contact</Link>
</ul>
@ -69,7 +69,7 @@ const Header = () => {
<ul className="w-full h-screen flex justify-center items-center text-center absolute top-0 left-0 bg-gradient-to-b from-[#f8cdc6] to-[#FDE2DE] text-[#95743D] z-10">
<li onClick={() => setNav(!nav)} className="flex flex-col gap-4 cursor-pointer capitalize text-3xl">
<Link href='/'>Home</Link>
<Link href=''>menu</Link>
<Link href='/menu'>menu</Link>
<Link href=''>about</Link>
<Link href=''>contact</Link>
<Link href=''>login</Link>

34
donutshop_ecommerce/src/components/layout/HomeMenu.js
View file

@ -1,4 +1,5 @@
import React from 'react'
"use client"
import React, { useEffect, useState } from 'react'
import { Parallax } from "react-scroll-parallax";
import MenuItem from '../menu/MenuItem';
import Slider from "react-slick";
@ -7,6 +8,17 @@ import "slick-carousel/slick/slick-theme.css";
const HomeDrink = () => {
const [bestSeller, setBestSeller] = useState([])
useEffect(() => {
fetch('/api/menu-items').then(res => {
res.json().then(menuItems => {
setBestSeller(menuItems.slice(-5))
})
})
}, [])
var menuSlide = {
dots: false,
infinite: false,
@ -65,21 +77,11 @@ const HomeDrink = () => {
</div>
<div className='py-2 sm:py-10 px-10'>
<Slider arrows={false} {...menuSlide}>
<div className='px-2'>
<MenuItem/>
</div>
<div className='px-2'>
<MenuItem/>
</div>
<div className='px-2'>
<MenuItem/>
</div>
<div className='px-2'>
<MenuItem/>
</div>
<div className='px-2'>
<MenuItem/>
</div>
{bestSeller?.length > 0 && bestSeller.map(item => (
<div className='px-2'>
<MenuItem {...item}/>
</div>
))}
</Slider>
</div>
</div>

10
donutshop_ecommerce/src/components/menu/MenuItem.js
View file

@ -1,15 +1,15 @@
import React from 'react'
import Image from 'next/image';
const MenuItem = () => {
const MenuItem = ({menuImg, itemName, description, basePrice, sizes}) => {
return (
<div className='py-1 sm:py-5 flex flex-col gap-2 sm:gap-4 justify-center items-center text-center rounded-xl bg-white h-[350px] sm:h-[450px]'>
<Image src='/donut1.png' width={300} height={300} alt='menu-donut' className='w-[200px] sm:w-[300px]'/>
<p className='text-sm sm:text-base font-semibold capitalize text-[#95743D] px-2'>Chocolate Beurre noisette Walnut Cream</p>
<p className='text-xs sm:text-sm px-2'>Desciption</p>
<p className='text-[#95743D] text-sm'>$5.99</p>
<Image src={menuImg} width={300} height={300} alt='menu-donut' className='w-[200px] sm:w-[250px]'/>
<p className='text-sm sm:text-base font-semibold capitalize text-[#95743D] px-2'>{itemName}</p>
<p className='text-xs sm:text-sm px-2 line-clamp-2'>{description}</p>
<p className='text-[#95743D] text-sm'>${basePrice}</p>
<button className='px-2 py-1 sm:px-4 sm:py-2 rounded-full text-xs sm:text-sm border border-[#E78895] text-[#95743D] font-semibold hover:bg-[#E78895] hover:text-[#FDE2DE] duration-300'>Add to cart</button>
</div>
)