feat(client): added actual destination to the links

EchoSkorJjj · Jan 1, 2024 · d55f18f · d55f18f
1 parent 1be3bd7
commit d55f18f
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 52 deletions.
diff --git a/client/src/features/pages/landing/Landing.tsx b/client/src/features/pages/landing/Landing.tsx
@@ -3,9 +3,9 @@ import { Box } from "@chakra-ui/react";
 
 import { useHead } from "~features/title/TitleContext";
 
+import Aboutus from "./aboutus/Aboutus";
 import Cards from "./cards/Cards";
 import Contact from "./contact/Contact";
-import Features from "./features/Features";
 import Hero from "./hero/Hero";
 
 const Landing = () => {
@@ -19,10 +19,18 @@ const Landing = () => {
 
   return (
     <Box width="100%">
-      <Hero />
-      <Features />
-      <Cards />
-      <Contact />
+      <section id="getstarted">
+        <Hero />
+      </section>
+      <section id="aboutus">
+        <Aboutus />
+      </section>
+      <section id="features">
+        <Cards />
+      </section>
+      <section id="contactus">
+        <Contact />
+      </section>
     </Box>
   );
 };

diff --git a/...tures/pages/landing/features/Features.tsx → ...eatures/pages/landing/aboutus/Aboutus.tsx b/...tures/pages/landing/features/Features.tsx → ...eatures/pages/landing/aboutus/Aboutus.tsx
@@ -17,13 +17,13 @@ import {
   useColorModeValue,
 } from "@chakra-ui/react";
 
-interface FeatureProps {
+interface AboutusProps {
   text: string;
   iconBg: string;
   icon?: ReactElement;
 }
 
-const Feature = ({ text, icon, iconBg }: FeatureProps) => {
+const Aboutus = ({ text, icon, iconBg }: AboutusProps) => {
   return (
     <Stack direction={"row"} align={"center"}>
       <Flex
@@ -71,19 +71,19 @@ export default function SplitWithImage() {
               />
             }
           >
-            <Feature
+            <Aboutus
               icon={
                 <Icon as={IoAnalyticsSharp} color={"yellow.500"} w={5} h={5} />
               }
               iconBg={useColorModeValue("yellow.100", "yellow.900")}
               text={"Business Planning"}
             />
-            <Feature
+            <Aboutus
               icon={<Icon as={IoLogoBitcoin} color={"green.500"} w={5} h={5} />}
               iconBg={useColorModeValue("green.100", "green.900")}
               text={"Financial Planning"}
             />
-            <Feature
+            <Aboutus
               icon={
                 <Icon as={IoSearchSharp} color={"purple.500"} w={5} h={5} />
               }

diff --git a/client/src/features/pages/landing/contact/Contact.tsx b/client/src/features/pages/landing/contact/Contact.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { BsDiscord, BsGithub, BsPerson } from "react-icons/bs";
 import {
   MdEmail,
@@ -143,7 +141,7 @@ export default function Contact() {
                           <Input type="text" size="md" />
                         </InputGroup>
                       </FormControl>
-                      <FormControl id="name">
+                      <FormControl id="email">
                         <FormLabel>Mail</FormLabel>
                         <InputGroup borderColor="#E0E1E7">
                           <InputLeftElement pointerEvents="none">
@@ -152,7 +150,7 @@ export default function Contact() {
                           <Input type="text" size="md" />
                         </InputGroup>
                       </FormControl>
-                      <FormControl id="name">
+                      <FormControl id="message">
                         <FormLabel>Message</FormLabel>
                         <Textarea
                           borderColor="gray.300"

diff --git a/client/src/shared/components/navbar/Navbar.tsx b/client/src/shared/components/navbar/Navbar.tsx
@@ -27,14 +27,23 @@ interface NavProps extends FlexProps {
 }
 
 interface Props {
+  href: string;
   children: React.ReactNode;
 }
 
-const Links = ["Get Started", "About Us", "Features", "Contact Us"];
+interface NavLinkProps {
+  name: string;
+  href: string;
+}
 
-const NavLink = (props: Props) => {
-  const { children } = props;
+const Links: Array<NavLinkProps> = [
+  { name: "Get Started", href: "#getstarted" },
+  { name: "About Us", href: "#aboutus" },
+  { name: "Features", href: "#features" },
+  { name: "Contact Us", href: "#contactus" },
+];
 
+const NavLink = ({ href, children }: Props) => {
   return (
     <Box
       as="a"
@@ -45,7 +54,7 @@ const NavLink = (props: Props) => {
         textDecoration: "none",
         bg: useColorModeValue("gray.200", "gray.700"),
       }}
-      href={"#"}
+      href={href}
     >
       {children}
     </Box>
@@ -60,6 +69,8 @@ const Navbar = ({ onOpen, ...rest }: NavProps) => {
       ml={isAuthenticated ? { base: 0, md: 60 } : 0}
       px={{ base: 4, md: 4 }}
       height="20"
+      position="sticky"
+      top={0}
       alignItems="center"
       bg={useColorModeValue("white", "gray.900")}
       borderBottomWidth="1px"
@@ -91,7 +102,9 @@ const Navbar = ({ onOpen, ...rest }: NavProps) => {
           display={isAuthenticated ? "none" : { base: "none", md: "flex" }}
         >
           {Links.map((link) => (
-            <NavLink key={link}>{link}</NavLink>
+            <NavLink key={link.name} href={link.href}>
+              {link.name}
+            </NavLink>
           ))}
         </HStack>
       </Flex>

diff --git a/client/src/shared/components/sidebar/Sidebar.tsx b/client/src/shared/components/sidebar/Sidebar.tsx
@@ -7,8 +7,8 @@ import {
   CloseButton,
   Flex,
   FlexProps,
-  Stack,
   Icon,
+  Stack,
   useColorModeValue,
 } from "@chakra-ui/react";
 
@@ -18,11 +18,13 @@ import { useAuth } from "~features/auth";
 
 interface LinkItemProps {
   name: string;
+  href: string;
   icon: IconType;
 }
 
 interface NavItemProps extends FlexProps {
   icon: IconType;
+  href: string;
   children: React.ReactNode;
 }
 
@@ -31,44 +33,62 @@ interface SidebarProps extends BoxProps {
 }
 
 interface Props {
+  href: string;
   children: React.ReactNode;
 }
 
-const Links = ["Get Started", "About Us", "Features", "Contact Us"];
+interface NavLinkProps {
+  name: string;
+  href: string;
+}
 
-const NavLink = (props: Props) => {
-  const { children } = props;
+const Links: Array<NavLinkProps> = [
+  { name: "Get Started", href: "#getstarted" },
+  { name: "About Us", href: "#aboutus" },
+  { name: "Features", href: "#features" },
+  { name: "Contact Us", href: "#contactus" },
+];
 
+const NavLink = ({ href, children, ...rest }: Props) => {
   return (
     <Box
       as="a"
-      px={2}
-      py={1}
-      rounded={"md"}
-      _hover={{
-        textDecoration: "none",
-        bg: useColorModeValue("gray.200", "gray.700"),
-      }}
-      href={"#"}
+      href={href}
+      style={{ textDecoration: "none" }}
+      _focus={{ boxShadow: "none" }}
     >
-      {children}
+      <Flex
+        align="center"
+        p="4"
+        mx="4"
+        borderRadius="lg"
+        role="group"
+        cursor="pointer"
+        _hover={{
+          bg: "cyan.400",
+          color: "white",
+        }}
+        {...rest}
+      >
+        {children}
+      </Flex>
     </Box>
   );
 };
 
 const LinkItems: Array<LinkItemProps> = [
-  { name: "Dashboard", icon: RxDashboard },
-  { name: "Trending", icon: FiTrendingUp },
-  { name: "Explore", icon: FiCompass },
-  { name: "Favourites", icon: FiStar },
-  { name: "Settings", icon: FiSettings },
+  { name: "Dashboard", href: "/dashboard", icon: RxDashboard },
+  { name: "Trending", href: "/trending", icon: FiTrendingUp },
+  { name: "Explore", href: "/explore", icon: FiCompass },
+  { name: "Favourites", href: "/favourites", icon: FiStar },
+  { name: "Settings", href: "/settings", icon: FiSettings },
 ];
 
-const NavItem = ({ icon, children, ...rest }: NavItemProps) => {
+const NavItem = ({ href, icon, children, ...rest }: NavItemProps) => {
   return (
     <Box
       as="a"
-      href="#"
+      href={href}
       style={{ textDecoration: "none" }}
       _focus={{ boxShadow: "none" }}
     >
@@ -119,19 +139,23 @@ const Sidebar = ({ onClose, ...rest }: SidebarProps) => {
         <Logo destination={isAuthenticated ? "/dashboard" : "/"} />
         <CloseButton display={{ base: "flex", md: "none" }} onClick={onClose} />
       </Flex>
-      {isAuthenticated
-        ? LinkItems.map((link) => (
-            <NavItem key={link.name} icon={link.icon}>
-              {link.name}
-            </NavItem>
-          ))
-        : <Box pb={4} display={{ md: 'none' }} mx="8">
-        <Stack as={'nav'} spacing={4}>
-          {Links.map((link) => (
-            <NavLink key={link}>{link}</NavLink>
-          ))}
-        </Stack>
-      </Box>}
+      {isAuthenticated ? (
+        LinkItems.map((link) => (
+          <NavItem key={link.name} icon={link.icon} href={link.href}>
+            {link.name}
+          </NavItem>
+        ))
+      ) : (
+        <Box pb={4} display={{ md: "none" }} mx="8">
+          <Stack as={"nav"} spacing={4}>
+            {Links.map((link) => (
+              <NavLink key={link.name} href={link.href}>
+                {link.name}
+              </NavLink>
+            ))}
+          </Stack>
+        </Box>
+      )}
     </Box>
   );
 };