Merge pull request #380 from HoomanDgtl/main

update: ui, dropdown & fix bugs

src/components/about-pages/network-activity/dashboard.tsx

@@ -244,8 +244,6 @@ export function Dashboard({
       dashboardData.networkCapacityStats.compare.storage,
   );
 
-  console.log(marketData);
-
   return (
     <div className="space-y-10">
       <section>

src/components/about-pages/pricing/price-compare.tsx

@@ -1,17 +1,12 @@
+import type { Gpus } from "@/components/gpu-table/gpu-table";
 import { BASE_API_URL } from "@/lib/constants";
-import { bibyteUnits, bytesToShrink, toBytes } from "@/lib/unit-utils";
-import { priceCompareCustom } from "@/lib/urlUtils";
-import axios from "axios";
-import { Fragment, useEffect, useState } from "react";
-import { useCustomPricing } from "./CustomPricingContext";
-import { Chip } from "./chip";
+import { bibyteUnits, toBytes } from "@/lib/unit-utils";
 import { Listbox, Transition } from "@headlessui/react";
-import { ChevronUpDownIcon } from "@heroicons/react/20/solid";
+import axios from "axios";
 import clsx from "clsx";
 import { CheckIcon } from "lucide-react";
-import { useQuery } from "@tanstack/react-query";
-import type { Gpus } from "@/components/gpu-table/gpu-table";
-import { gpus } from "@/utils/api";
+import { Fragment, useEffect, useState } from "react";
+import { useCustomPricing } from "./CustomPricingContext";
 const isProd = import.meta.env.PROD;
 
 const mockData = {
@@ -46,12 +41,6 @@ export default function PriceCompare({ initialData }: any) {
         (x) => x === selectedStorageUnit,
       );
 
-      console.log({
-        cpu: selectedCPU * 1000,
-        memory: toBytes(selectedMemory, selectedMemoryUnit, isMemBibyte),
-        storage: toBytes(selectedStorage, selectedStorageUnit, isStorageBibyte),
-      });
-
       if (isProd) {
         const response = await axios.post(BASE_API_URL + "/pricing", {
           cpu: selectedCPU * 1000,

src/components/about-pages/pricing/pricing.tsx

@@ -1,25 +1,18 @@
+import { Tables, type Gpus } from "@/components/gpu-table/gpu-table";
 import {
   HoverCard,
   HoverCardContent,
   HoverCardTrigger,
 } from "@/components/ui/hover-card";
-import { BASE_API_URL } from "@/lib/constants";
 import { roundDecimal } from "@/lib/math-helpers";
-import { bibyteUnits, bytesToShrink, toBytes } from "@/lib/unit-utils";
-import { priceCompareCustom } from "@/lib/urlUtils";
+import { gpus } from "@/utils/api";
+import { useQuery } from "@tanstack/react-query";
 import axios from "axios";
 import { useEffect, useState } from "react";
 import { FormattedNumber } from "react-intl";
-import {
-  CustomPricingProvider,
-  useCustomPricing,
-} from "./CustomPricingContext";
-import { Chip } from "./chip";
+import { useCustomPricing } from "./CustomPricingContext";
 import PriceChart from "./price-chart";
 import PriceCompare from "./price-compare";
-import GpuTable, { Tables, type Gpus } from "@/components/gpu-table/gpu-table";
-import { useQuery } from "@tanstack/react-query";
-import { gpus } from "@/utils/api";
 
 export function Pricing({ page, pathName, initialData }: any) {
   const { customPricing } = useCustomPricing();
@@ -70,7 +63,6 @@ export function Pricing({ page, pathName, initialData }: any) {
           },
         },
   });
-  console.log(data);
 
   return (
     <div className="rounded-[8px] border  bg-background2 px-4 py-6 shadow-sm md:p-6">

src/components/blog/search-dialog.tsx

@@ -1,11 +1,9 @@
 import { Dialog, Transition } from "@headlessui/react";
 import { Fragment, useEffect, useState } from "react";
 
-import { ChevronRightIcon } from "@heroicons/react/20/solid";
 import { Loader2 } from "lucide-react";
 
 import Fuse from "fuse.js"; // Import the Fuse.js library
-import FormattedDate from "../formatted-date.astro";
 
 // Define a TypeScript interface for the project data
 interface Blog {
@@ -62,7 +60,6 @@ export default function SearchDialog() {
         .then((jsonData) => {
           setCollectionData(jsonData as Blog[]); // Type assertion to Blog[]
           setFilteredProjects(jsonData.slice(0, 3)); // Initialize filteredBlogs with the first 3 projects
-          console.log(jsonData);
         })
         .catch((err) => {
           setError(err.message);
@@ -167,7 +164,7 @@ export default function SearchDialog() {
                       <Loader2 className="mr-2 h-6 w-6 animate-spin text-primary" />
                     </div>
                   ) : error ? (
-                    <div className="bg-primary/10 mt-6 rounded-lg px-6 py-4">
+                    <div className="mt-6 rounded-lg bg-primary/10 px-6 py-4">
                       <h3 className="text-lg font-bold text-primary">
                         Something Bad Happened
                       </h3>

src/components/brand-pages/resources-card.astro

@@ -2,7 +2,6 @@
 import { Image } from "astro:assets";
 import ButtonLink from "../ui/button-link.astro";
 const { title, description, button, image, type } = Astro.props;
-console.log(button);
 ---
 
 <div

src/components/development-pages/mobile-nav-current-groups.tsx

@@ -1,5 +1,4 @@
 import { Disclosure, Transition } from "@headlessui/react";
-import { ChevronDownIcon } from "lucide-react";
 import { XMarkIcon } from "../header/icons";
 import { useLockBody } from "../use-lock-body";
 
@@ -186,7 +185,6 @@ function SideNav({
 
                       // Create a Date object from the formatted date string
                       const dateObject = new Date(dateString);
-                      console.log(dateObject);
 
                       // Add the date object to the meeting object
                       return {

src/components/development-pages/mobile-nav-meetings.tsx

@@ -1,5 +1,4 @@
 import { Disclosure, Transition } from "@headlessui/react";
-import { ChevronDownIcon } from "lucide-react";
 import { XMarkIcon } from "../header/icons";
 import { useLockBody } from "../use-lock-body";
 
@@ -185,7 +184,6 @@ function SideNav({
 
                         // Create a Date object from the formatted date string
                         const dateObject = new Date(dateString);
-                        console.log(dateObject);
 
                         // Add the date object to the meeting object
                         return {

src/components/docs/docs-nav.tsx

@@ -5,18 +5,14 @@ import {
 } from "@/components/ui/collapsible";
 import { docsSequence as docs } from "@/content/Docs/_sequence";
 import { ChevronDownIcon } from "lucide-react";
-import React, { useEffect, Suspense, useState } from "react";
+import React, { useEffect, useState } from "react";
 
 import { useStorage } from "@/utils/store";
 
 const MAX_DEPTH = 4;
 
 export function DocsNav({ docsNav = [], pathName = [] }: any) {
-  console.log(pathName);
   const [$docsLinkTracks, setDocsLinkTracks] = useState<any>({});
-  // const $docsLinkTracks = useStorage((state) => state.docsLinkTracks);
-  // const setDocsLinkTracks = useStorage((state) => state.setDocsLinkTracks);
-  console.log($docsLinkTracks);
 
   const getCurrentLink = (link: string) => {
     if (typeof window === "undefined") {
@@ -56,8 +52,6 @@ export function DocsNav({ docsNav = [], pathName = [] }: any) {
     setDocsLinkTracks({ ...newLinkTracks, [pathName]: true });
   }, [pathName]);
 
-  console.log($docsLinkTracks);
-
   const Dropdown = (
     navItem: any,
     pathName: any,
@@ -72,10 +66,10 @@ export function DocsNav({ docsNav = [], pathName = [] }: any) {
           index === 0
             ? ""
             : depth && index === 0
-            ? ""
-            : depth === 0
-            ? "mt-5"
-            : ""
+              ? ""
+              : depth === 0
+                ? "mt-5"
+                : ""
         }
       >
         {depth === 0 ? (

src/components/docs/search-dialog.tsx

@@ -3,7 +3,6 @@ import { Fragment, useEffect, useRef, useState } from "react";
 
 import { ChevronRightIcon } from "@heroicons/react/20/solid";
 import { Loader2 } from "lucide-react";
-import { addKeyboardListener } from "@/utils/keyboardListenerManager";
 
 // Define a TypeScript interface for the project data
 interface Docs {
@@ -22,7 +21,6 @@ export default function SearchDialog({ currentPath }: { currentPath: string }) {
   const [error, setError] = useState<string | null>(null); // Error can be a string or null
   const [searchQuery, setSearchQuery] = useState<string>(""); // State for the search query
   const searchInputRef = useRef<HTMLInputElement>(null);
-  console.log(filteredProjects);
 
   // Function to close the modal
   function closeModal() {
@@ -173,7 +171,7 @@ export default function SearchDialog({ currentPath }: { currentPath: string }) {
 
                 <Dialog.Panel className="w-full max-w-2xl transform overflow-hidden rounded-lg  border  border-[#808080] bg-background2 p-6 text-left align-middle shadow-lg transition-all ">
                   <input
-                    className="focus:border-primary/40 w-full rounded-lg border px-4 py-2 outline-none dark:bg-background "
+                    className="w-full rounded-lg border px-4 py-2 outline-none focus:border-primary/40 dark:bg-background "
                     placeholder="Search documentation"
                     disabled={isLoading}
                     value={searchQuery}
@@ -186,7 +184,7 @@ export default function SearchDialog({ currentPath }: { currentPath: string }) {
                       <Loader2 className="mr-2 h-6 w-6 animate-spin text-primary" />
                     </div>
                   ) : error ? (
-                    <div className="bg-primary/10 mt-6 rounded-lg px-6 py-4">
+                    <div className="mt-6 rounded-lg bg-primary/10 px-6 py-4">
                       <h3 className="text-lg font-bold text-primary">
                         Something Bad Happened
                       </h3>
@@ -223,7 +221,6 @@ export default function SearchDialog({ currentPath }: { currentPath: string }) {
 
 const HighlightedText = ({ text, query }: any) => {
   const parts = text.split(new RegExp(`(${query})`, "gi"));
-  console.log(parts);
 
   return (
     <>
@@ -259,7 +256,7 @@ const ProjectCard = ({
 
   return (
     <a href={`/docs/${link}/`}>
-      <div className="hover:bg-primary/10 flex cursor-pointer items-center justify-between rounded-lg p-4 text-[#808080] hover:text-primary md:px-6 md:py-4">
+      <div className="flex cursor-pointer items-center justify-between rounded-lg p-4 text-[#808080] hover:bg-primary/10 hover:text-primary md:px-6 md:py-4">
         <div className="w-[85%]">
           <h3 className="text-base font-bold  md:text-lg">
             <HighlightedText text={title} query={query} />

src/components/docs/sidebar.astro

@@ -1,12 +1,8 @@
 ---
 import { ChevronDownIcon } from "lucide-react";
-import { Skeleton } from "../ui/skeleton";
-import AkashLogo from "./akash-docs-logo.astro";
 import { DocsNav, HomeButton } from "./docs-nav";
-import { docsSequence } from "@/content/Docs/_sequence";
 
 const { nav, providersNav } = Astro.props;
-console.log(nav);
 
 const pathname = new URL(Astro.request.url).pathname;
 ---

src/components/docs/toggle-nav.astro

@@ -1,9 +1,7 @@
 ---
 const { nav } = Astro.props;
-console.log(nav);
 
 const pathname = new URL(Astro.request.url).pathname;
-console.log(pathname);
 ---
 
 <div class="flex items-center justify-between border-b px-10 pt-1.5">
@@ -27,23 +25,4 @@ console.log(pathname);
       })
     }
   </div>
-  <!-- <a
-    href="/"
-    class="flex w-fit cursor-pointer items-center gap-x-2 rounded-lg px-2 py-1 text-xs font-medium leading-[16px] text-para hover:bg-primary/10 hover:text-primary"
-  >
-    <svg
-      width="4"
-      height="8"
-      viewBox="0 0 4 8"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M3.5 1L0.5 4L3.5 7"
-        stroke="#687076"
-        stroke-linecap="round"
-        stroke-linejoin="round"></path>
-    </svg>
-     akash.network</a
-  > -->
 </div>

src/components/ecosystem-pages/categories-mobile.tsx

@@ -15,8 +15,6 @@ const Categories = ({
   page: string;
   className?: string;
 }) => {
-  console.log(tags);
-
   return (
     <Menu
       as="div"

src/components/ecosystem-pages/description-expand.tsx

@@ -24,16 +24,13 @@ const DescriptionExpand = ({ description }: any) => {
       const lineHeight = parseInt(style.getPropertyValue("line-height"));
       const height = parseInt(style.getPropertyValue("height"));
       const lines = height / 20;
-      console.log(lines, description?.split(" ")?.[0]);
 
       if (lines > 3) {
         setLinesGreater(true);
       }
     }
   }, [ref, description]);
 
-  console.log(linesGreater);
-
   return (
     <div className="relative">
       <p
@@ -76,7 +73,7 @@ const DescriptionExpand = ({ description }: any) => {
                   className="mt-6 line-clamp-3  cursor-pointer text-left text-sm font-medium leading-[20px] text-cardGray"
                 ></p>
                 <p className="mt-2 text-left text-sm font-medium text-primary">
-                  Read more
+                  Show more
                 </p>
               </PopoverTrigger>
               <PopoverContent className="max-w-[25rem]  bg-background2">
@@ -107,7 +104,7 @@ const DescriptionExpand = ({ description }: any) => {
             onClick={() => setIsExpanded(!isExpanded)}
             className="mt-2 text-sm font-medium text-primary"
           >
-            {isExpanded ? "Read less" : "Read more"}
+            {isExpanded ? "Show less" : "Show more"}
           </button>
         )}
       </div>

src/components/ecosystem-pages/providers-page/card.tsx

@@ -57,7 +57,6 @@ export default function ProvidersCard({ provider }: any) {
   const intl = useIntl();
   const name =
     provider?.name?.split(".")?.[provider?.name?.split(".")?.length - 2];
-  console.log(name);
 
   return (
     <div className="flex w-full flex-col overflow-hidden rounded-lg border   bg-background2 p-4">

src/components/ecosystem-pages/providers-page/dashboard.tsx

@@ -41,7 +41,6 @@ function Layout({ pathName, initialProviders }: any) {
   const [page, setPage] = useState(1);
   const [sort, setSort] = useState<string>("active-leases-desc");
   const [filteredProviders, setFilteredProviders] = useState<any>([]);
-  console.log(filteredProviders);
 
   const [search, setSearch] = useState("");
   const [isFilteringActive, setIsFilteringActive] = useState(true);

src/components/ecosystem-pages/top-header.astro

@@ -1,10 +1,8 @@
 ---
 import Categories from "./categories-mobile";
-import EcosystemNavbar from "./ecosystem-navbar.astro";
 import SearchDialog from "./search-dialog";
 const astroUrl = Astro.url;
 const pathName = astroUrl.pathname.split("/");
-console.log(pathName);
 
 const { tags } = Astro.props;
 ---