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

added about page

Browse source
This commit is contained in:
Juthatip McDevitt 2024-05-28 23:39:31 -05:00
parent 91ae0f79a5
commit a78a989083
21 changed files with 105 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
donutshop_ecommerce/package-lock.json generated
View file

@ -12,6 +12,7 @@
"@aws-sdk/client-s3": "^3.576.0",
"bcrypt": "^5.1.1",
"framer-motion": "^11.1.8",
"gsap": "^3.12.5",
"mongodb": "^6.6.1",
"mongoose": "^8.3.4",
"next": "14.2.3",
@ -4787,6 +4788,11 @@
"integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
"dev": true
},
"node_modules/gsap": {
"version": "3.12.5",
"resolved": "https://registry.npmjs.org/gsap/-/gsap-3.12.5.tgz",
"integrity": "sha512-srBfnk4n+Oe/ZnMIOXt3gT605BX9x5+rh/prT2F1SsNJsU1XuMiP0E2aptW481OnonOGACZWBqseH5Z7csHxhQ=="
},
"node_modules/has-bigints": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",

1
donutshop_ecommerce/package.json
View file

@ -13,6 +13,7 @@
"@aws-sdk/client-s3": "^3.576.0",
"bcrypt": "^5.1.1",
"framer-motion": "^11.1.8",
"gsap": "^3.12.5",
"mongodb": "^6.6.1",
"mongoose": "^8.3.4",
"next": "14.2.3",

BIN
donutshop_ecommerce/public/donut-story.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.2 MiB

BIN
donutshop_ecommerce/public/story.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.3 MiB

37
donutshop_ecommerce/src/app/about/page.js Normal file
View file

@ -0,0 +1,37 @@
"use client"
import Image from 'next/image'
import React from 'react'
const AboutPage = () => {
return (
<>
<div className='w-full h-full lg:h-screen flex flex-col relative'>
<p className='text-center mt-20 uppercase text-6xl md:text-[90px] lg:text-[125px] xl:text-[150px] leading-none text-black font-extrabold tracking-tighter drop-shadow-[0_3px_3px_rgba(45,45,45,0.5)] px-5'>our story</p>
<Image src='/donut-story.jpg' width={1600} height={1600} alt='home-hero' className='w-full h-[400px] sm:h-full object-cover -mt-5 sm:-mt-10 -z-10'/>
</div>
<div className='bg-[#FAF3E8] -mt-10 w-full h-full rounded-t-3xl'>
<div className='max-w-4xl mx-auto'>
<div className='flex flex-col gap-4 pt-20 lg:pt-40 pb-10 sm:pb-20 px-5 sm:px-10 text-center text-lg sm:text-2xl lg:text-3xl'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat sed do eiusmod tempor incididunt.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
<div className='px-5 lg:px-10'>
<svg width="159" height="406" viewBox="0 0 159 406" fill="none" xmlns="http://www.w3.org/2000/svg" className='absolute -mt-20'><path d="M147.909 405.212C148.569 405.713 149.51 405.584 150.01 404.924L158.174 394.172C158.674 393.512 158.546 392.571 157.886 392.07C157.226 391.569 156.285 391.698 155.784 392.358L148.528 401.915L138.97 394.659C138.311 394.159 137.37 394.287 136.869 394.947C136.368 395.607 136.496 396.548 137.156 397.049L147.909 405.212ZM38.4791 0.233987C23.3568 28.9106 5.51875 76.4686 1.12258 126.046C-3.27307 175.618 5.75683 227.476 44.7273 264.351L46.7892 262.171C8.75375 226.182 -0.243382 175.416 4.11086 126.311C8.46457 77.2124 26.1533 30.039 41.1327 1.63335L38.4791 0.233987ZM44.7273 264.351C83.1605 300.717 108.28 331.68 124.062 355.58C139.879 379.532 146.242 396.278 147.33 404.221L150.302 403.814C149.122 395.198 142.46 377.997 126.566 353.927C110.638 329.806 85.3619 298.67 46.7892 262.171L44.7273 264.351Z" fill="#DB001C"/></svg>
</div>
<div className='flex justify-center items-center pb-10 sm:pb-20 px-5 sm:px-10'>
<Image src='/story.jpg' width={1000} height={1000} className='w-[800px] h-[500px] rounded-3xl object-cover'/>
</div>
<div className='flex flex-col gap-4 pt-0 pb-20 px-5 sm:px-10 text-center text-xl sm:text-2xl lg:text-3xl'>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat sed do eiusmod tempor incididunt.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</div>
</div>
</>
)
}
export default AboutPage

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

@ -81,7 +81,7 @@ const CartPage = () => {
<p className='text-center mt-10'>Your cart is empty</p>
)}
{cartProducts?.length > 0 && cartProducts.map((product, index) => (
<div className='flex gap-2 justify-between items-center border-b'>
<div key={index} className='flex gap-2 justify-between items-center border-b'>
<div className='flex items-center gap-0 lg:gap-2'>
<div className='w-[60px] sm:w-[100px] flex items-center justify-center py-2'>
<Image src={product.menuImg} alt='' width={100} height={100} className='w-[45px] sm:w-[65px] lg:w-[80px]'/>

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

@ -109,7 +109,7 @@ const CategoriesPage = () => {
<div className='mt-5'>
<label className='-mb-1 text-gray-700 font-semibold text-sm'>Categories</label>
{categories?.length > 0 && categories.map(c => (
<div className='w-full p-2 flex justify-between my-2 rounded-md outline-none border border-[#DCA0AE] duration-300'>
<div key={c._id} className='w-full p-2 flex justify-between my-2 rounded-md outline-none border border-[#DCA0AE] duration-300'>
<p>{c.name}</p>
<div className='flex gap-2'>
<button type='button' onClick={() => {setEditCategory(c); setCategoryName(c.name)}} className='text-green-600 hover:opacity-60'><LiaEditSolid/></button>

3
donutshop_ecommerce/src/app/globals.css
View file

@ -39,9 +39,6 @@ div.tabs > *{
div.tabs > *.active{
@apply bg-pink-500 text-white font-semibold
}
/*=====Responsive=====*/
@media (min-width: 765px){
.letter {

9
donutshop_ecommerce/src/app/layout.js
View file

@ -1,10 +1,17 @@
import { Inter } from "next/font/google";
import { Creepster } from "next/font/google";
import "./globals.css";
import Header from "../components/layout/Header";
import AppProvider from "../components/AppContext";
import { Toaster } from "react-hot-toast";
const inter = Inter({ subsets: ["latin"] });
const creepster = Creepster({
subsets: ['latin'],
display: 'swap',
variable: '--font-creepster',
weight: '400',
})
export const metadata = {
title: "Puffy Dough | Donuts, Coffee, and Drinks",
@ -15,7 +22,7 @@ export default function RootLayout({ children }) {
return (
<html lang="en">
<link rel="shortcut icon" href="/favicon.png" />
<body className={inter.className} suppressHydrationWarning={true}>
<body className={`${inter.className} ${creepster.variable}`} suppressHydrationWarning={true}>
<AppProvider>
<Toaster/>
<Header/>

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

@ -37,7 +37,7 @@ const MenuItemsPage = () => {
<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>
{menuItems?.length > 0 && menuItems.map(item => (
<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'>
<Link key={item._id} 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>

4
donutshop_ecommerce/src/app/menu/page.js
View file

@ -21,11 +21,11 @@ const MenuPage = () => {
return (
<div className='pb-20 md:pb-40'>
{categories?.length > 0 && categories.map(c => (
<div className='px-10 min-[380px]:px-5 lg:px-10 py-5 sm:py-10'>
<div key={c._id} className='px-10 min-[380px]:px-5 lg:px-10 py-5 sm:py-10'>
<p className='text-center text-2xl sm:text-3xl md:text-4xl text-pink-500 uppercase font-bold drop-shadow-[0_2px_2px_rgba(105,105,105,1)]'>{c.name}</p>
<div className='grid grid-cols-1 min-[380px]:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4 min-[380px]:gap-5 mt-5 sm:mt-10'>
{menuItems.filter(item => item.category === c._id).map(item => (
<Menu {...item}/>
<Menu key={item._id} {...item}/>
))}
</div>
</div>

4
donutshop_ecommerce/src/app/orders/[id]/page.js
View file

@ -58,7 +58,7 @@ const OrdersPage = () => {
<div className='border-b pb-5'>
<p className='mb-5 text-pink-500 font-semibold text-center'>Order Summary</p>
{order.cartProducts.map(product => (
<div className='flex justify-between'>
<div key={product._id} className='flex justify-between'>
<div>
<p className='w-[150px] lg:w-[300px] text-ellipsis whitespace-nowrap overflow-hidden text-gray-800 text-xs sm:text-sm font-bold'>{product.itemName}</p>
{product.size && (
@ -66,7 +66,7 @@ const OrdersPage = () => {
)}
{product.extra?.length > 0 && (
<div className='text-gray-800 font-semibold text-xs sm:text-sm flex gap-1 items-center'>Add: {product.extra.map(extras => (
<span className='text-[10px] sm:text-xs text-gray-600'>{extras.itemName} (+${extras.price})</span>
<span key={extras._id} className='text-[10px] sm:text-xs text-gray-600'>{extras.itemName} (+${extras.price})</span>
))}
</div>
)}

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

@ -37,7 +37,7 @@ const OrderPage = () => {
<UserTab isAdmin={true}/>
<div className='max-w-md mx-auto mt-10'>
{orders?.length > 0 && orders.map((order) => (
<div className='border p-2 my-2 w-full rounded-md outline-none border-[#DCA0AE] flex items-center justify-between'>
<div key={order._id} className='border p-2 my-2 w-full rounded-md outline-none border-[#DCA0AE] flex items-center justify-between'>
<div className='flex flex-col gap-2'>
<div className='text-gray-700 font-semibold'>{order.userEmail}</div>
<div className='mb-2'>

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

@ -32,7 +32,7 @@ const Userspage = () => {
<UserTab isAdmin={true}/>
<div className='max-w-md mx-auto mt-10'>
{users?.length > 0 && users.map(user => (
<div className='border p-2 my-2 w-full rounded-md outline-none border-[#DCA0AE] flex items-center justify-between'>
<div key={user._id} className='border p-2 my-2 w-full rounded-md outline-none border-[#DCA0AE] flex items-center justify-between'>
<div className='flex flex-col'>
<div className='text-gray-700 font-semibold'>
{!!user.name && (

12
donutshop_ecommerce/src/components/layout/AddressInfo.js
View file

@ -7,29 +7,29 @@ const AddressInfo = ({addressProps, setAddressProps, disabled=false}) => {
<>
<div>
<label className='text-gray-700 text-sm font-semibold'>Phone number</label>
<input type='tel' placeholder='Phone number' value={phoneNumber} onChange={ev => setAddressProps('phoneNumber', ev.target.value)} disabled={disabled} className=' disabled:bg-gray-100 disabled:text-gray-400'/>
<input type='tel' placeholder='Phone number' value={phoneNumber || ''} onChange={ev => setAddressProps('phoneNumber', ev.target.value)} disabled={disabled} className=' disabled:bg-gray-100 disabled:text-gray-400'/>
</div>
<div>
<label className='text-gray-700 text-sm font-semibold'>Street Address</label>
<input type='text' placeholder='Address' value={streetAddress} onChange={ev => setAddressProps('streetAddress', ev.target.value)} disabled={disabled} className=' disabled:bg-gray-100 disabled:text-gray-400'/>
<input type='text' placeholder='Address' value={streetAddress || ''} onChange={ev => setAddressProps('streetAddress', ev.target.value)} disabled={disabled} className=' disabled:bg-gray-100 disabled:text-gray-400'/>
</div>
<div>
<label className='text-gray-700 text-sm font-semibold'>City</label>
<input type='text' placeholder='City' value={city} onChange={ev => setAddressProps('city', ev.target.value)} disabled={disabled} className=' disabled:bg-gray-100 disabled:text-gray-400'/>
<input type='text' placeholder='City' value={city || ''} onChange={ev => setAddressProps('city', ev.target.value)} disabled={disabled} className=' disabled:bg-gray-100 disabled:text-gray-400'/>
</div>
<div className='flex flex-col sm:flex-row gap-0 sm:gap-2'>
<div>
<label className='text-gray-700 text-sm font-semibold'>State/Province</label>
<input type='text' placeholder='State/Province' value={stateProvince} onChange={ev => setAddressProps('stateProvince', ev.target.value)} disabled={disabled} className=' disabled:bg-gray-100 disabled:text-gray-400'/>
<input type='text' placeholder='State/Province' value={stateProvince || ''} onChange={ev => setAddressProps('stateProvince', ev.target.value)} disabled={disabled} className=' disabled:bg-gray-100 disabled:text-gray-400'/>
</div>
<div>
<label className='text-gray-700 text-sm font-semibold'>Zip/Postal code</label>
<input type='text' placeholder='Zip/Postal code' value={zipCode} onChange={ev => setAddressProps('zipCode', ev.target.value)} disabled={disabled} className=' disabled:bg-gray-100 disabled:text-gray-400'/>
<input type='text' placeholder='Zip/Postal code' value={zipCode || ''} onChange={ev => setAddressProps('zipCode', ev.target.value)} disabled={disabled} className=' disabled:bg-gray-100 disabled:text-gray-400'/>
</div>
</div>
<div>
<label className='text-gray-700 text-sm font-semibold'>Country</label>
<input type='text' placeholder='Country' value={country} onChange={ev => setAddressProps('country', ev.target.value)} disabled={disabled} className=' disabled:bg-gray-100 disabled:text-gray-400'/>
<input type='text' placeholder='Country' value={country || ''} onChange={ev => setAddressProps('country', ev.target.value)} disabled={disabled} className=' disabled:bg-gray-100 disabled:text-gray-400'/>
</div>
</>
)

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

@ -49,8 +49,8 @@ const Header = () => {
<ul className="hidden md:flex flex-row gap-10 text-xs font-semibold uppercase text-[#95743D]">
<Link href='/' className="">Home</Link>
<Link href='/menu' className="">Menu</Link>
<Link href='' className="">about</Link>
<Link href='' className="">contact</Link>
<Link href='/about' className="">about</Link>
<Link href='/contact' className="">contact</Link>
</ul>
</div>
<div className='mt-3'>
@ -73,13 +73,31 @@ const Header = () => {
</ul>
<div onClick={() => setNav(!nav)} className="cursor-pointer pr-4 z-20 text-[#95743D] md:hidden "> {nav ? <IoCloseOutline size={30} /> : <HiBars2 size={30} />}</div>
{nav && (
<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">
<ul className="w-full h-[80%] flex justify-start 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="w-full flex flex-col gap-5 cursor-pointer capitalize text-xl px-5">
<div className="flex flex-col gap-20 justify-between">
<div className="flex flex-col gap-3">
<Link href='/'>Home</Link>
<Link href='/menu'>menu</Link>
<Link href=''>about</Link>
<Link href=''>contact</Link>
<Link href=''>login</Link>
<Link href='/menu' >menu</Link>
<Link href='/about' >about</Link>
<Link href='/contact' >contact</Link>
</div>
<div className="flex flex-col gap-2 items-center text-lg">
{status === 'authenticated' && (
<>
<Link href={'/profile'} className="text-gray-700 text-sm capitalize">{userName}</Link>
<Link href='/cart' className="flex gap-1 items-center text-sm">Your cart({cartProducts.length})</Link>
<button onClick={() => signOut()} className="w-[100px] p-1 border border-[#95743D] rounded-full">Logout</button>
</>
)}
{status === 'unauthenticated' && (
<>
<Link href='/login' className="border border-[#95743D] p-1 w-[100px] rounded-full">login</Link>
<Link href='/register' className="bg-[#95743D] p-1 w-[100px] text-white rounded-full">Register</Link>
</>
)}
</div>
</div>
</li>
</ul>
)}

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

@ -79,7 +79,7 @@ const HomeDrink = () => {
<div className='py-2 sm:py-10 px-10'>
<Slider arrows={false} {...menuSlide}>
{bestSeller?.length > 0 && bestSeller.map(item => (
<div className='px-2'>
<div key={item} className='px-2'>
<MenuItem {...item}/>
</div>
))}

2
donutshop_ecommerce/src/components/layout/MenuItemForm.js
View file

@ -32,7 +32,7 @@ const MenuItemForm = ({handleMenuFormSubmit, menuItem}) => {
<label className='-mb-1 text-gray-700 font-semibold text-sm flex'>Category</label>
<select value={category} onChange={ev => setCategory(ev.target.value)} className='border p-2 block my-2 w-full rounded-md outline-none border-[#DCA0AE] bg-transparent'>
{categories?.length > 0 && categories.map(c => (
<option value={c._id} >{c.name}</option>
<option key={c._id} value={c._id} >{c.name}</option>
))}
</select>
</div>

2
donutshop_ecommerce/src/components/layout/UserForm.js
View file

@ -45,7 +45,7 @@ const UserForm = ({user, onSave}) => {
{loginAsUser.admin && (
<div className='flex gap-2 items-center mb-5'>
<label htmlFor='admin' className='text-gray-700 text-sm font-semibold'>Admin:</label>
<input type='checkbox' id='admin' value={'1'} checked={admin} onClick={ev => setAdmin(ev.target.checked)}/>
<input type='checkbox' id='admin' value={'1'} checked={admin} onChange={ev => setAdmin(ev.target.checked)}/>
</div>
)}
<button className='w-full bg-pink-500 text-white p-2 rounded-md hover:opacity-80 duration-300 disabled:cursor-not-allowed'>Save</button>

8
donutshop_ecommerce/src/components/menu/Menu.js
View file

@ -61,8 +61,8 @@ const Menu = (menuItem) => {
<div className='w-full border-t-[1px] border-pink-500 border-dashed'>
<p className='text-xs sm:text-sm font-semibold capitalize text-[#95743D] px-2 m-2'>Choose your size</p>
{sizes.map(size => (
<div className='flex justify-start text-start text-xs sm:text-sm gap-2 py-1'>
<input type='radio' name='size' onClick={() => setSelectedsize(size)} checked={selectedSize?.itemName === size.itemName}/>{size.itemName} ${basePrice + size.price}
<div key={size._id} className='flex justify-start text-start text-xs sm:text-sm gap-2 py-1'>
<input type='radio' name='size' onChange={() => setSelectedsize(size)} checked={selectedSize?.itemName === size.itemName}/>{size.itemName} ${basePrice + size.price}
</div>
))}
</div>
@ -71,8 +71,8 @@ const Menu = (menuItem) => {
<div className='w-full border-t-[1px] border-pink-500 border-dashed'>
<p className='text-xs sm:text-sm font-semibold capitalize text-[#95743D] px-2 m-2'>Extra toppings</p>
{extraItems.map(extraTopping => (
<div className='flex justify-start text-start text-xs sm:text-sm gap-2 py-1'>
<input type='checkbox' name={extraTopping.itemName} onClick={ev => handleSelectedTopping(ev, extraTopping)}/>{extraTopping.itemName} (${extraTopping.price})
<div key={extraTopping._id} className='flex justify-start text-start text-xs sm:text-sm gap-2 py-1'>
<input type='checkbox' name={extraTopping.itemName} onChange={ev => handleSelectedTopping(ev, extraTopping)}/>{extraTopping.itemName} (${extraTopping.price})
</div>
))}
</div>

3
donutshop_ecommerce/tailwind.config.js
View file

@ -12,6 +12,9 @@ module.exports = {
"gradient-conic":
"conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
},
fontFamily: {
creepSter: ["var(--font-creepster)"],
},
},
},
plugins: [],