Skip to content

Commit

Permalink
Add AuthPage component for authentication functionality
Browse files Browse the repository at this point in the history
  • Loading branch information
@mmpotulo28
mmpotulo28 committed Oct 19, 2024
1 parent cdf3a78 commit 2a0ea6c
Show file tree
Hide file tree
Showing 6 changed files with 537 additions and 57 deletions.
2 changes: 1 addition & 1 deletion .vscode/settings.json
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
{
"cSpell.words": ["applepay", "embla", "noofitems"]
"cSpell.words": ["applepay", "embla", "noofitems", "signup"]
}
112 changes: 56 additions & 56 deletions src/components/Header.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import React, { useEffect } from 'react';
import Image from 'next/image';
import Link from 'next/link';
import Updates from './Updates';
import { iCartItem } from '@/lib/Type';
import React, { useEffect } from "react";
import Image from "next/image";
import Link from "next/link";
import Updates from "./Updates";
import { iCartItem } from "@/lib/Type";

export let updateCart = () => {};

Expand All @@ -12,103 +12,103 @@ const Header: React.FC = () => {

useEffect(() => {
updateCart = () => {
const updatedCart = JSON.parse(window.localStorage.getItem('cart') || '[]');
const updatedCart = JSON.parse(window.localStorage.getItem("cart") || "[]");
setCart(updatedCart);
};

const initialCart = JSON.parse(window.localStorage.getItem('cart') || '[]');
const initialCart = JSON.parse(window.localStorage.getItem("cart") || "[]");
setCart(initialCart);

window.addEventListener('storage', updateCart);
window.addEventListener("storage", updateCart);

return () => {
window.removeEventListener('storage', updateCart);
window.removeEventListener("storage", updateCart);
};
}, []);

return (
<header>
<div className='top-nav slide-down'>
<div className='socials'>
<Link href={'/'} className='nav-link'>
<i className='fab fa-facebook'></i>
<div className="top-nav slide-down">
<div className="socials">
<Link href={"/"} className="nav-link">
<i className="fab fa-facebook"></i>
</Link>
<Link href={'/'} className='nav-link'>
<i className='fab fa-twitter'></i>
<Link href={"/"} className="nav-link">
<i className="fab fa-twitter"></i>
</Link>
<Link href={'/'} className='nav-link'>
<i className='fab fa-instagram'></i>
<Link href={"/"} className="nav-link">
<i className="fab fa-instagram"></i>
</Link>
<Link href={'/'} className='nav-link'>
<i className='fab fa-linkedin'></i>
<Link href={"/"} className="nav-link">
<i className="fab fa-linkedin"></i>
</Link>
</div>
</div>

<nav className='main-nav'>
<ul className='left-nav-items'>
<p className='username'>User Name</p>
<nav className="main-nav">
<ul className="left-nav-items">
<p className="username">User Name</p>
</ul>
<div className='logo slide-down'>
<div className="logo slide-down">
<Image
className='rotate'
src='/images/logo.jpeg'
alt='logo'
className="rotate"
src="/images/logo.jpeg"
alt="logo"
width={100}
height={100}
/>
</div>

<ul className='nav-items'>
<li className='nav-item'>
<Link href='/' className='nav-link'>
<i className='fas fa-utensils'></i>
<p className='nav-item-text'>Menu</p>
<ul className="nav-items">
<li className="nav-item">
<Link href="/" className="nav-link">
<i className="fas fa-utensils"></i>
<p className="nav-item-text">Menu</p>
</Link>
</li>
<li className='nav-item'>
<Link href='#' className='nav-link'>
<i className='fa fa-percent'></i>
<p className='nav-item-text'>Sales</p>
<li className="nav-item">
<Link href="#" className="nav-link">
<i className="fa fa-percent"></i>
<p className="nav-item-text">Sales</p>
</Link>
</li>
<li className='nav-item'>
<Link href='/endpoints/user/dashboard' className='nav-link'>
<i className='fa fa-user'></i>
<p className='nav-item-text'>Account</p>
<li className="nav-item">
<Link href="/endpoints/user/dashboard" className="nav-link">
<i className="fa fa-user"></i>
<p className="nav-item-text">Account</p>
</Link>
</li>
<li className='nav-item'>
<Link href='#' className='nav-link'>
<i className='fa fa-info-circle'></i>
<p className='nav-item-text'>About</p>
<li className="nav-item">
<Link href="/auth/login" className="nav-link">
<i className="fa fa-user"></i>
<p className="nav-item-text">Login</p>
</Link>
</li>
<li className='nav-item'>
<Link href='#' className='nav-link'>
<i className='fa fa-phone'></i>
<p className='nav-item-text'>Contact</p>
<li className="nav-item">
<Link href="#" className="nav-link">
<i className="fa fa-phone"></i>
<p className="nav-item-text">Contact</p>
</Link>
</li>
</ul>

{/* search bar */}
<div className='search-bar'>
<input type='text' placeholder='Search' />
<div className="search-bar">
<input type="text" placeholder="Search" />
<button>
<i className='fa fa-search'></i>
<i className="fa fa-search"></i>
</button>
</div>

<ul className='right-nav-items slide-in-left'>
<li className='nav-item slide-down'>
<Link href='/cart' className='nav-link'>
<i className='fa fa-shopping-cart'></i>
<ul className="right-nav-items slide-in-left">
<li className="nav-item slide-down">
<Link href="/cart" className="nav-link">
<i className="fa fa-shopping-cart"></i>
</Link>
<p className='cart-count'>{cart.length}</p>
<p className="cart-count">{cart.length}</p>
</li>
</ul>
<span id='nav-line'></span>
<span id="nav-line"></span>
</nav>

<Updates />
Expand Down
Loading

0 comments on commit 2a0ea6c

Please sign in to comment.