From 691577ec53ae38740955fdb324be8a9f50f9a624 Mon Sep 17 00:00:00 2001 From: dharamveergit Date: Thu, 15 Aug 2024 00:12:38 +0530 Subject: [PATCH 01/23] update header.astro and popover-nav-item.tsx --- src/components/header/header.astro | 29 ++--- src/components/header/popover-nav-item.tsx | 132 +++++++++++++++++---- 2 files changed, 121 insertions(+), 40 deletions(-) diff --git a/src/components/header/header.astro b/src/components/header/header.astro index decee8ee..77220a40 100644 --- a/src/components/header/header.astro +++ b/src/components/header/header.astro @@ -12,6 +12,7 @@ import PopOverNavItem from "./popover-nav-item"; import DarkModeToggle from "../dark-mode-toggle.astro"; import ButtonLink from "../ui/button-link.astro"; import { GithubIcon, TwitterIcon, DiscordIcon } from "./icons"; +import PopOverNavItemNetwork, { NetworkNavbar } from "./popover-nav-item"; // Get current pathname const pathname = `/${Astro.url.pathname.split("/")[1]}`; @@ -22,24 +23,9 @@ interface Props { const { disableSticky } = Astro.props; -const networkItems = [ - { - title: "About Akash", - description: "Discover the story behind Akash and how it works", - link: "/about/general-information/", - }, - { - title: "Akash Stats", - description: - "Get insights into the latest statistics about the Akash Network", - link: "https://stats.akash.network/", - }, - { - title: "AKT Token", - description: "Understand the role of the $AKT token in the Akash ecosystem", - link: "/token", - }, -]; +const visibilty = { + network: ["/about", "/token"], +}; --- diff --git a/src/components/header/popover-nav-item.tsx b/src/components/header/popover-nav-item.tsx index 2b0b0b3c..067c5d56 100644 --- a/src/components/header/popover-nav-item.tsx +++ b/src/components/header/popover-nav-item.tsx @@ -9,10 +9,47 @@ import { Fragment, useState } from "react"; import { ChevronDownIcon } from "@heroicons/react/20/solid"; import { ArrowUpRight } from "lucide-react"; +import { BadgeHelp, Codesandbox, ArrowRightCircle } from "lucide-react"; +import clsx from "clsx"; -const PopOverNavItem = ({ subItems }: any) => { - console.log(subItems); +export const networkItems = [ + { + icon: BadgeHelp, + title: "About Akash", + description: "Discover how Akash works", + link: "/about/general-information/", + }, + { + icon: Codesandbox, + title: "Providers", + description: "Your customers' data will be safe and secure", + link: "/about/providers/", + }, + { + customIcon: ( + + + + ), + title: "$AKT Token", + description: "Understand the role of $AKT token", + link: "/token", + }, +]; +const PopOverNavItemNetwork = () => { return (
@@ -34,43 +71,96 @@ const PopOverNavItem = ({ subItems }: any) => { leaveFrom="transform opacity-100 scale-100" leaveTo="transform opacity-0 scale-95" > - -
- {subItems.map((item: any, i: any) => { + + +
); }; -export default PopOverNavItem; +export default PopOverNavItemNetwork; + +export const NetworkNavbar = ({ pathname }: { pathname: string }) => { + return ( +
+
+ {networkItems.map((item, i: any) => { + return ( + + {item.icon ? : item.customIcon} +

+ {item.title} +

+ + ); + })} +
+
+ ); +}; From 8212fde2cbb4ab0ef05afae5e26ea431fa822537 Mon Sep 17 00:00:00 2001 From: dharamveergit Date: Thu, 15 Aug 2024 02:01:22 +0530 Subject: [PATCH 02/23] update 5 files, copy 1 file and move 1 file --- src/components/header/header.astro | 22 +- .../header/popovers/popover-nav-community.tsx | 229 ++++++++++++++++++ .../{ => popovers}/popover-nav-item.tsx | 17 +- src/components/sub-items-sidebar.astro | 8 +- src/pages/about/[...slug].astro | 1 + src/pages/about/providers.astro | 1 + src/pages/token.astro | 2 +- 7 files changed, 253 insertions(+), 27 deletions(-) create mode 100644 src/components/header/popovers/popover-nav-community.tsx rename src/components/header/{ => popovers}/popover-nav-item.tsx (94%) diff --git a/src/components/header/header.astro b/src/components/header/header.astro index 77220a40..8ead5b22 100644 --- a/src/components/header/header.astro +++ b/src/components/header/header.astro @@ -1,18 +1,16 @@ --- // Import required assets -import SunIcon from "@/assets/icons/sun.svg"; - // Import required components -import Logo from "@/components/ui/logo.astro"; import NavLink from "@/components/header/nav-link.astro"; -import { Image } from "astro:assets"; -import HamburgerMenu from "./hamburger-menu"; -import PopOverNavItem from "./popover-nav-item"; +import Logo from "@/components/ui/logo.astro"; import DarkModeToggle from "../dark-mode-toggle.astro"; -import ButtonLink from "../ui/button-link.astro"; -import { GithubIcon, TwitterIcon, DiscordIcon } from "./icons"; -import PopOverNavItemNetwork, { NetworkNavbar } from "./popover-nav-item"; +import HamburgerMenu from "./hamburger-menu"; +import { DiscordIcon, GithubIcon, TwitterIcon } from "./icons"; +import PopOverCommunity from "./popovers/popover-nav-community"; +import PopOverNavItemNetwork, { + NetworkNavbar, +} from "./popovers/popover-nav-item"; // Get current pathname const pathname = `/${Astro.url.pathname.split("/")[1]}`; @@ -47,13 +45,13 @@ ${disableSticky ? "" : "sticky top-0 z-[30]"} class="mt-1 hidden lg:flex lg:w-full lg:justify-center lg:gap-x-[20px] xl:gap-x-[24px]" > - + Development - + Ecosystem diff --git a/src/components/header/popovers/popover-nav-community.tsx b/src/components/header/popovers/popover-nav-community.tsx new file mode 100644 index 00000000..88757889 --- /dev/null +++ b/src/components/header/popovers/popover-nav-community.tsx @@ -0,0 +1,229 @@ +import { Menu, Transition } from "@headlessui/react"; +import { Fragment } from "react"; + +import { ChevronDownIcon } from "@heroicons/react/20/solid"; +import clsx from "clsx"; +import { ArrowRightCircle, BadgeHelp, CalendarHeart } from "lucide-react"; + +const communityItems = [ + { + icon: CalendarHeart, + title: "Events", + + link: "/about/general-information/", + }, + { + icon: BadgeHelp, + title: "Akash Insiders", + + link: "/about/providers/", + }, + { + customIcon: ( + + + + + + + + ), + title: "Community Contributions", + + link: "/about/providers/", + }, + { + customIcon: ( + + + + + + + + ), + title: "Akash Validators", + + link: "/token", + }, +]; + +const PopOverCommunity = () => { + return ( + +
+ + Community + +
+ + + +
+ {communityItems.map((item, i: any) => { + return ( + + {({ active }) => ( + +
+ {item.icon ? : item.customIcon} +
+
+

+ {item.title} + {item.link.startsWith("http") ? ( + + ) : ( + "" + )} +

+
+ + )} + + ); + })} +
+ + + + + ); +}; + +export default PopOverCommunity; + +export const NetworkNavbar = ({ pathname }: { pathname: string }) => { + return ( +
+
+ {communityItems.map((item, i: any) => { + return ( + + {item.icon ? : item.customIcon} +

+ {item.title} +

+ + ); + })} +
+
+ ); +}; diff --git a/src/components/header/popover-nav-item.tsx b/src/components/header/popovers/popover-nav-item.tsx similarity index 94% rename from src/components/header/popover-nav-item.tsx rename to src/components/header/popovers/popover-nav-item.tsx index 067c5d56..1792e2c2 100644 --- a/src/components/header/popover-nav-item.tsx +++ b/src/components/header/popovers/popover-nav-item.tsx @@ -1,18 +1,11 @@ -import { - Dialog, - Disclosure, - Menu, - Popover, - Transition, -} from "@headlessui/react"; -import { Fragment, useState } from "react"; +import { Menu, Transition } from "@headlessui/react"; +import { Fragment } from "react"; import { ChevronDownIcon } from "@heroicons/react/20/solid"; -import { ArrowUpRight } from "lucide-react"; -import { BadgeHelp, Codesandbox, ArrowRightCircle } from "lucide-react"; import clsx from "clsx"; +import { ArrowRightCircle, BadgeHelp, Codesandbox } from "lucide-react"; -export const networkItems = [ +const networkItems = [ { icon: BadgeHelp, title: "About Akash", @@ -137,7 +130,7 @@ export default PopOverNavItemNetwork; export const NetworkNavbar = ({ pathname }: { pathname: string }) => { return ( -
+
{networkItems.map((item, i: any) => { return ( diff --git a/src/components/sub-items-sidebar.astro b/src/components/sub-items-sidebar.astro index 42efed7c..8a8b8e0c 100644 --- a/src/components/sub-items-sidebar.astro +++ b/src/components/sub-items-sidebar.astro @@ -1,11 +1,15 @@ --- +import clsx from "clsx"; const pathname = new URL(Astro.request.url).pathname; -const { nav, link } = Astro.props; +const { nav, link, subNav } = Astro.props; ---