Buyankhuu/footer

package.json

@@ -24,6 +24,8 @@
     "next": "^13.5.4",
     "react": "^18.2.0",
     "react-dom": "18.2.0",
+    "react-router-dom": "^6.17.0",
+    "react-toastify": "^9.1.3",
     "styled-components": "^6.0.8"
   },
   "devDependencies": {

src/app/checkout/page.tsx

@@ -1,12 +1,14 @@
 'use client';
 
 import NavBar from '../../components/NavBar';
+import Footer from '../../components/Footer';
 
 export default function Checkout() {
   return (
     <main>
       <NavBar />
       <div>Checkout</div>
+      <Footer />
     </main>
   );
 }

src/app/login/page.tsx

@@ -1,12 +1,13 @@
 'use client';
 
 import { useState } from 'react';
+
+import Image from 'next/image';
 import LoginForm from '../../components/LoginForm';
 
 import {
   GlobalStyle,
   Fullscreen,
-  Img,
   LoginBox,
   LoginContent,
   WelcomeSign,
@@ -22,7 +23,12 @@ export default function App() {
     <main>
       <GlobalStyle />
       <Fullscreen>
-        <Img />
+        <Image
+          src="/images/ShantiLogo.png"
+          alt="logo pic"
+          width={125}
+          height={70}
+        />
         <LoginBox>
           <LoginContent>
             <WelcomeSign>Welcome</WelcomeSign>

src/app/profileScreen/page.tsx

@@ -1,17 +1,37 @@
 'use client';
 
-import { LogOutButton, GlobalStyle } from './style';
+import { useRouter } from 'next/navigation';
+import { toast } from 'react-toastify';
+import NavBar from '../../components/NavBar';
+
+import { LogOutButton, GlobalStyle, PopUp } from './style';
 
 import { signOut } from '../../api/supabase/auth/auth';
 
-import NavBar from '../../components/NavBar';
+import 'react-toastify/dist/ReactToastify.css';
+
+import Footer from '../../components/Footer';
 
 export default function Profile() {
+  const router = useRouter();
+
+  const showToastMessage = () => {
+    signOut();
+    toast("You've been Logged Out! Redirecting...", {
+      position: toast.POSITION.TOP_CENTER,
+    });
+    setTimeout(() => {
+      router.push('/login');
+    }, 3000);
+  };
+
   return (
     <main>
       <NavBar />
       <GlobalStyle />
-      <LogOutButton onClick={() => signOut()}>Sign Out</LogOutButton>
+      <LogOutButton onClick={() => showToastMessage()}>Log Out!</LogOutButton>
+      <PopUp closeButton={false} autoClose={3000} hideProgressBar limit={1} />
+      <Footer />
     </main>
   );
 }

src/app/profileScreen/style.ts

@@ -1,5 +1,7 @@
 import styled, { createGlobalStyle } from 'styled-components';
 
+import { ToastContainer } from 'react-toastify';
+
 export const GlobalStyle = createGlobalStyle`
   body {
     background:white;
@@ -20,3 +22,7 @@ export const LogOutButton = styled.button`
   width: 300px;
   height: 50px;
 `;
+
+export const PopUp = styled(ToastContainer)`
+  transform: translate(-150px, 250px);
+`;

src/app/storefront/page.tsx

@@ -4,6 +4,7 @@ import React, { useEffect, useState } from 'react';
 import Storefront from './storefrontItems';
 import ProductButtons from './productButtons';
 import NavBar from '../../components/NavBar';
+import Footer from '../../components/Footer';
 import {
   GlobalStyle,
   ButtonsContainer,
@@ -78,6 +79,7 @@ export default function App() {
       </StickyHeader>
       <ShopAllText>Shop All</ShopAllText>
       <Storefront products={FilteredProducts} />
+      <Footer />
     </main>
   );
 }

src/app/storefront/styles.ts

@@ -4,6 +4,7 @@ export const GlobalStyle = createGlobalStyle`
   body {
     background:white;
   }
+
 `;
 interface props {
   isClicked: boolean;
@@ -14,7 +15,7 @@ export const StickyHeader = styled.div`
   background-color: var(--Light-Periwinkle, #f4f7ff);
   filter: drop-shadow(0px 4px 7px rgba(0, 0, 0, 0.1));
   width: 1470px;
-  height: 210px;
+  height: 10px;
 `;
 
 export const Button = styled.button<props>`
@@ -69,7 +70,6 @@ export const ButtonsContainer = styled.div`
   justify-content: center;
   align-items: center;
   z-index: 5;
-
   transform: translate(0px, -180px);
 `;
 export const NavButton = styled.button`
@@ -113,4 +113,5 @@ export const ShopAllText = styled.h1`
   padding-top: 230px;
   padding-left: 50px;
   font-family: 'Public Sans', sans-serif;
+  color: black;
 `;

src/components/Footer.tsx

@@ -0,0 +1,31 @@
+import Location from './Location';
+
+import { FooterDiv, ContactDiv } from '../styles/components';
+
+export default function Logo() {
+  return (
+    <main>
+      <FooterDiv>
+        <ContactDiv>
+          <h1>Contact Us</h1>
+        </ContactDiv>
+        <Location
+          District="Tenderloin"
+          Address="730 Polk Street, 3rd Floor San Francisco, CA 9410"
+          Phone="Phone: (415) 674-4700"
+        />
+
+        <Location
+          District="Mission District"
+          Address="3170 23rd Street San Francisco, CA 94110"
+          Phone="Phone: (415) 674-4700"
+        />
+        <Location
+          District="Potrero Hill"
+          Address="950 Connecticut St San Francisco, CA 94107"
+          Phone="Phone: (415) 674-4700"
+        />
+      </FooterDiv>
+    </main>
+  );
+}

src/components/Location.tsx

@@ -0,0 +1,17 @@
+import { LocationDiv, Addie } from '../styles/components';
+
+export default function Logo(props: {
+  District: string;
+  Address: string;
+  Phone: string;
+}) {
+  const { District, Address, Phone } = props;
+
+  return (
+    <LocationDiv>
+      <h1>{District}</h1>
+      <Addie>{Address}</Addie>
+      <p>{Phone}</p>
+    </LocationDiv>
+  );
+}

src/components/NavBar.tsx

@@ -26,7 +26,6 @@ export default function NavBar() {
             height={40}
           />
         </Link>
-
         <Link href="../checkout">
           <Image src="/images/Cart.png" alt="logo pic" width={30} height={40} />
         </Link>

src/styles/components.tsx

@@ -1,9 +1,5 @@
 import styled, { createGlobalStyle } from 'styled-components';
 
-const COMPONENTS = {};
-
-export default COMPONENTS;
-
 export const GlobalStyle = createGlobalStyle`
   body {
     background:white;
@@ -16,9 +12,8 @@ export const NavBarComp = styled.nav`
   justify-content: space-between;
   padding-left: 30px;
   padding-right: 30px;
-  height: 200px;
+  height: 180px;
   padding-top: 20px;
-
   width: 100%;
   background: var(--Light-Periwinkle, #f4f7ff);
   box-shadow: 0px 4px 7px 0px rgba(0, 0, 0, 0.1);
@@ -31,3 +26,49 @@ export const ButtonsDiv = styled.div`
   justify-content: space-around;
   padding-top: 15px;
 `;
+
+export const LocationDiv = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  width: 300px;
+  height: 250px;
+  margin-right: 60px;
+
+  color: var(--Black, #101010);
+
+  font-family: Public Sans;
+  font-style: normal;
+  line-height: normal;
+`;
+
+export const ContactDiv = styled.div`
+  width: 250px;
+  height: 250px;
+  margin-right: 130px;
+  margin-left: 30px;
+  color: var(--Black, #101010);
+  text-align: center;
+  font-family: Public Sans;
+  font-size: 20px;
+  font-style: normal;
+  line-height: normal;
+`;
+
+export const FooterDiv = styled.div`
+  display: flex;
+  flex-direction: row;
+  color: black;
+  width: 90%;
+  padding-left: 10px;
+  padding-top: 40px;
+  margin-left: 70px;
+  border-top: 2px solid black;
+
+  height: 200px;
+`;
+
+export const Addie = styled.p`
+  margin-top: 30px;
+  margin-bottom: 30px;
+`;