Merge pull request #2 from SarveshLimaye/nav

navbar + hero added
SarveshLimaye · Feb 18, 2023 · 67ffbd1 · 67ffbd1
2 parents 1539cc8 + 5655bcf
commit 67ffbd1
Show file tree

Hide file tree

Showing 7 changed files with 2,222 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -3,11 +3,17 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@chakra-ui/icons": "^2.0.17",
+    "@chakra-ui/react": "^2.5.1",
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",
+    "framer-motion": "^9.0.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.7.1",
     "react-router-dom": "^6.8.1",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.0"

diff --git a/src/App.js b/src/App.js
@@ -2,11 +2,13 @@ import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import Home from "./pages/Home/Home";
 import Podcasts from "./pages/Podcasts/Podcasts";
 import AddPodcast from "./pages/AddPodcast/AddPodcast";
+import NavBar from "./components/Navbar/NavBar";
 import './App.css';
 
 function App() {
   return (
     <div className="App">
+      <NavBar />
      <Router>
       <Routes>
         <Route path="/" element={<Home />} />

diff --git a/src/components/Hero/Hero.jsx b/src/components/Hero/Hero.jsx
diff --git a/src/components/Navbar/NavBar.jsx b/src/components/Navbar/NavBar.jsx
@@ -0,0 +1,114 @@
+import React from 'react'
+import {
+    chakra,
+    Box,
+    Flex,
+    useColorModeValue,
+    VisuallyHidden,
+    HStack,
+    Button,
+    useDisclosure,
+    VStack,
+    IconButton,
+    CloseButton,
+  } from "@chakra-ui/react";
+  import { AiOutlineMenu } from "react-icons/ai";
+
+export default function NavBar() {
+    const bg = useColorModeValue("white", "gray.800");
+    const mobileNav = useDisclosure();
+  return (
+    <React.Fragment>
+      <chakra.header
+        bg={bg}
+        w="full"
+        h = "100px"
+        px={{ base: 6, sm: 4 }}
+        py={9}
+      >
+        <Flex alignItems="center" justifyContent="space-between" mx="auto">
+          <Flex>
+            <chakra.a
+              href="/"
+              title="Choc Home Page"
+              display="flex"
+              alignItems="center"
+            >
+              <VisuallyHidden>Choc</VisuallyHidden>
+            </chakra.a>
+            <chakra.h3 fontSize='35px' fontWeight="l" ml="2" color="brand.00">
+              Buzzpod
+            </chakra.h3>
+          </Flex>
+          <HStack display="flex" alignItems="center" spacing={1}>
+            <HStack
+              spacing={1}
+              mr={1}
+              color="brand.500"
+              display={{ base: "none", md: "inline-flex" }}
+            >
+              <chakra.a
+              href="/podcasts"
+              title="Choc Home Page"
+              display="flex"
+              alignItems="center"
+            ><Button variant="ghost">Podcasts</Button></chakra.a>
+             <chakra.a
+              href="/add"
+              title="Choc Home Page"
+              display="flex"
+              alignItems="center"
+            > <Button variant="ghost">Add Podcasts</Button></chakra.a>
+            </HStack>
+            <Button colorScheme="brand" size="sm">
+              Sign in
+            </Button>
+            <Box display={{ base: "inline-flex", md: "none" }}>
+              <IconButton
+                display={{ base: "flex", md: "none" }}
+                aria-label="Open menu"
+                fontSize="20px"
+                color="gray.800"
+                _dark={{ color: "inherit" }}
+                variant="ghost"
+                icon={<AiOutlineMenu />}
+                onClick={mobileNav.onOpen}
+              />
+
+              <VStack
+                pos="absolute"
+                top={0}
+                left={0}
+                right={0}
+                display={mobileNav.isOpen ? "flex" : "none"}
+                flexDirection="column"
+                p={2}
+                pb={4}
+                m={2}
+                bg={bg}
+                spacing={3}
+                rounded="sm"
+                shadow="sm"
+              >
+                <CloseButton
+                  aria-label="Close menu"
+                  onClick={mobileNav.onClose}
+                />
+
+                <Button w="full" variant="ghost">
+                  Podcasts
+                </Button>
+                <Button w="full" variant="ghost">
+                  Add Podcast
+                </Button>
+                <Button w="full" variant="ghost">
+                  Sign in
+                </Button>
+              </VStack>
+            </Box>
+          </HStack>
+        </Flex>
+      </chakra.header>
+    </React.Fragment>
+  )
+}
diff --git a/src/index.js b/src/index.js
@@ -3,11 +3,35 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import { ChakraProvider, extendTheme } from "@chakra-ui/react";
+
+const colors = {
+  brand: {
+    50: "#ecefff",
+    100: "#cbceeb",
+    200: "#a9aed6",
+    300: "#888ec5",
+    400: "#666db3",
+    500: "#4d5499",
+    600: "#3c4178",
+    700: "#2a2f57",
+    800: "#181c37",
+    900: "#080819"
+  }
+};
+const config = {
+  initialColorMode: "dark",
+  useSystemColorMode: false
+};
+
+const theme = extendTheme({ colors, config })
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
+  <ChakraProvider theme={theme}>
     <App />
+    </ChakraProvider>
   </React.StrictMode>
 );
 

diff --git a/src/pages/Home/Home.jsx b/src/pages/Home/Home.jsx
@@ -1,7 +1,10 @@
 import React from 'react'
+import Hero from '../../components/Hero/Hero'
 
 export default function Home() {
   return (
-    <div>Home</div>
+    <div>
+      <Hero />
+    </div>
   )
 }