diff --git a/components/BottomNav.js b/components/BottomNav.js new file mode 100644 index 0000000..7f2e568 --- /dev/null +++ b/components/BottomNav.js @@ -0,0 +1,294 @@ +import styles from "./BottomNav.module.css"; +import { useState, useEffect } from "react"; +import { useRouter } from "next/router"; +import { + Book, + BookOutline, + Search, + SearchOutline, + Heart, + HeartOutline, +} from "react-ionicons"; + +const BottomNav = (props) => { + const router = useRouter(); + const [activeTabs, setActiveTabs] = useState(props.name); + // useEffect(() => { + // switch (activeTabs) { + // case "library": + // // router.push("/authenticate"); + // console.log("library"); + // // router.push("/"); + // break; + // case "search": + // // router.push("/"); + // console.log("search"); + // // router.push("/authenticate"); + // break; + // case "wishlist": + // console.log("wishlist"); + // // router.push("/authenticate"); + // break; + // default: + // console.log("default"); + // // router.push("/"); + // break; + // } + // }, [activeTabs, router]); + + return ( +
+
+ {activeTabs === "library" ? ( +
+ { + router.push("/authenticate"); + console.log("library"); + setActiveTabs("library"); + }} + /> +
+ Library +
+
+ ) : ( + { + router.push("/authenticate"); + console.log("library"); + setActiveTabs("library"); + }} + /> + )} +
+
+ {activeTabs === "search" ? ( +
+ { + console.log("search"); + setActiveTabs("search"); + }} + /> +
+ Search +
+
+ ) : ( + { + console.log("search"); + setActiveTabs("search"); + }} + /> + )} +
+
+ {activeTabs === "wishlist" ? ( +
+ { + router.push("/"); + console.log("wishlist"); + setActiveTabs("wishlist"); + }} + /> +
+ Wishlist +
+
+ ) : ( + { + router.push("/"); + console.log("wishlist"); + setActiveTabs("wishlist"); + }} + /> + )} +
+ +
+ ); +}; + +export default BottomNav; diff --git a/components/BottomNav.module.css b/components/BottomNav.module.css new file mode 100644 index 0000000..8439674 --- /dev/null +++ b/components/BottomNav.module.css @@ -0,0 +1,23 @@ +.bottomNav { + width: 100%; + height: 7%; + position: fixed; + bottom: 0; + padding-top: 8px; + /* border-top: 1px solid #000; */ + border-top-left-radius: 16px; + border-top-right-radius: 16px; + z-index: 3; + background-color: #fff; + display: flex; + justify-content: center; + align-items: center; + box-shadow: 0 4px 14px 0 rgb(0 118 255 / 39%); +} +.bnTab { + width: 25%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} diff --git a/components/SignIn.js b/components/SignIn.js index 296994e..c0ed74d 100644 --- a/components/SignIn.js +++ b/components/SignIn.js @@ -28,62 +28,47 @@ export default function SignIn() { return ( - - - +
- -
-
- - -
- -
- - - +
+ + +
+ +
+ ); } diff --git a/components/SignUp.js b/components/SignUp.js index 2b3364d..8769529 100644 --- a/components/SignUp.js +++ b/components/SignUp.js @@ -48,78 +48,63 @@ export default function SignUp() { return ( - - - + + + + - - - + Sign Up + + ); } diff --git a/package.json b/package.json index 2ae6e85..6c25a79 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,9 @@ "next": "latest", "react": "17.0.2", "react-dom": "17.0.2", + "react-feather": "^2.0.9", + "react-ionicons": "^4.2.0", + "styled-components": "^5.3.3", "yup": "^0.32.11" }, "devDependencies": { diff --git a/pages/authenticate.js b/pages/authenticate.js index 1d2bbfa..4caf74c 100644 --- a/pages/authenticate.js +++ b/pages/authenticate.js @@ -1,16 +1,9 @@ import Head from "next/head"; import * as React from "react"; import Container from "@mui/material/Container"; -import Typography from "@mui/material/Typography"; -import Box from "@mui/material/Box"; -import Button from "@mui/material/Button"; -import Link from "../components/Link"; import SignIn from "../components/SignIn"; import SignUp from "../components/SignUp"; -// import Tab from "@mui/material/Tab"; -import TabContext from "@mui/lab/TabContext"; -// import TabList from "@mui/lab/TabList"; -// import TabPanel from "@mui/lab/TabPanel"; +import BottomNav from "../components/BottomNav"; import TabsUnstyled from "@mui/base/TabsUnstyled"; import { CustomTab, @@ -29,53 +22,68 @@ function AuthPage(props) { return ( Authenticate - Bookworm -
- Mountains -
- - - Sign In - Sign Up - - - - - - - - + +
+ Mountains +
+ + + Sign In + Sign Up + + + + + + + + + + + ); } -export async function getServerSideProps(context) { - const res = await fetch("https://api.github.com/repos/vercel/next.js"); - const json = await res.json(); - return { - props: { stars: json.stargazers_count }, - }; -} +// export async function getServerSideProps(context) { +// const res = await fetch("https://api.github.com/repos/vercel/next.js"); +// const json = await res.json(); +// return { +// props: { stars: json.stargazers_count }, +// }; +// } export default AuthPage; diff --git a/pages/index.js b/pages/index.js index 4f67998..9a0e552 100644 --- a/pages/index.js +++ b/pages/index.js @@ -3,6 +3,7 @@ import Link from "next/link"; import * as React from "react"; import ReactDOM from "react-dom"; import Button from "@mui/material/Button"; +import BottomNav from "../components/BottomNav"; export default function Home() { return ( @@ -18,16 +19,7 @@ export default function Home() { - +