Skip to content

Commit

Permalink
Merge pull request #372 from HoomanDgtl/main
Browse files Browse the repository at this point in the history 
revamp: nav & ux experience
  • Loading branch information
@HoomanDgtl
HoomanDgtl authored Sep 26, 2024
2 parents 1f5bc7e + bd53454 commit 3694536
Show file tree
Hide file tree
Showing 39 changed files with 1,572 additions and 1,080 deletions.
35 changes: 35 additions & 0 deletions src/components/about-pages/network-tabs.astro
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
---
import clsx from "clsx";
const links = [
{
title: "Network Capacity",
link: "/about/network-capacity/",
},
{
title: "Akash Providers",
link: "/about/providers/",
},
];
const pathname = Astro.url.pathname;
---

<div class="my-10 flex items-center justify-center md:my-16">
<div class="flex gap-1 rounded-lg bg-[#F4F4F5] p-1 dark:bg-background2">
{
links.map((link) => (
<a
href={link.link}
class={clsx(
" rounded-[4px] px-3 py-1.5 text-sm font-medium",
pathname === link.link
? "bg-background text-foreground shadow-sm"
: "text-para",
)}
>
{link.title}
</a>
))
}
</div>
</div>
9 changes: 7 additions & 2 deletions src/components/community-pages/side-nav.astro
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,24 @@
---
import clsx from "clsx";
interface Props {
nav: {
label: string;
link: string;
}[];
link?: string;
subNav?: boolean;
}
const { nav, link } = Astro.props;
const { nav, link, subNav } = Astro.props;
const pathname = new URL(Astro.request.url).pathname;
---

<div
class="sidebar-scroll sticky top-[120px] hidden h-screen overflow-y-auto md:col-span-4 md:block lg:col-span-3"
class={clsx(
"sidebar-scroll sticky top-[120px] hidden h-screen overflow-y-auto md:col-span-4 md:block lg:col-span-3",
subNav ? "top-[176px]" : "top-[120px]",
)}
>
<div class="flex flex-col gap-y-3">
{
Expand Down
209 changes: 10 additions & 199 deletions src/components/ecosystem-pages/providers-page/dashboard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,9 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { useEffect, useRef, useState } from "react";
import { IntlProvider } from "react-intl";

import { Search } from "lucide-react";
import ProvidersCard from "./card";
import FilterMobile from "./filter-mobile";
import Nav from "./nav";
import SortDropDown from "./sort-dropdown";
import Tag from "./tag";
import { useProviderList } from "./useProviderList";
import { ArrowUpCircle } from "lucide-react";
const queryClient = new QueryClient();

export default function Index({ pathName, initialProviders }: any) {
Expand Down Expand Up @@ -142,145 +137,15 @@ function Layout({ pathName, initialProviders }: any) {

return (
<>
{/* Header */}
<div className="container ">
<div className="mt-6 flex flex-col justify-between gap-x-6 pb-6 md:mt-8 md:pb-8 lg:mt-10 lg:flex-row lg:border-b lg:pb-10">
{" "}
<Nav pathName={pathName} />
<div className="my-5 border-b lg:hidden"></div>
<div className="flex w-full flex-1 items-center justify-between gap-x-[32px] lg:flex-row-reverse lg:justify-start lg:gap-x-[36px]">
<FilterMobile
onIsFilteringActiveClick={onIsFilteringActiveClick}
isFilteringActive={isFilteringActive}
onIsFilteringAuditedClick={onIsFilteringAuditedClick}
isFilteringAudited={isFilteringAudited}
className=" lg:hidden"
/>

<div
className={`relative
transition-all duration-300 ease-in-out
${!searchIconVisible ? "w-56 pl-3" : "w-28 pl-9"}
inline-flex items-center justify-center gap-x-1.5 rounded-md border border-border bg-background2 pr-3 text-xs font-medium leading-none text-sortText shadow-sm hover:bg-gray-50 dark:hover:bg-darkGray md:text-sm`}
>
{searchIconVisible && (
<button
className="absolute left-3"
onClick={() => ref?.current?.focus()}
>
<Search className="text-sm text-foreground" size={16} />
</button>
)}

<input
ref={ref}
type="text"
className=" h-full w-full rounded-lg bg-transparent py-2.5 outline-none placeholder:font-normal placeholder:text-foreground"
placeholder="Search"
onFocus={() => setSearchIconVisible(false)}
onBlur={() => setSearchIconVisible(true)}
value={search}
onChange={onSearchChange}
/>
</div>
</div>
</div>
</div>

{/* <div className="container">
<div className="mt-10 hidden gap-x-5 overflow-x-auto md:flex lg:hidden">
<Tag
onClick={() =>
onIsFilteringActiveClick(isFilteringActive ? false : true)
}
isActive={isFilteringActive}
>
Active
</Tag>
<Tag
onClick={() =>
onIsFilteringAuditedClick(isFilteringAudited ? false : true)
}
isActive={isFilteringAudited}
>
Audited
</Tag>
</div>
</div>
<div className="container mt-10 flex gap-x-5 overflow-x-auto md:hidden">
<Tag
onClick={() =>
onIsFilteringActiveClick(isFilteringActive ? false : true)
}
isActive={isFilteringActive}
>
Active
</Tag>
<Tag
onClick={() =>
onIsFilteringAuditedClick(isFilteringAudited ? false : true)
}
isActive={isFilteringAudited}
>
Audited
</Tag>
</div> */}

{isLoadingProviders ? (
<div className="container mt-10">loading...</div>
<div className="">loading...</div>
) : (
<div className="container mt-10 flex justify-between lg:gap-x-[20px] xl:gap-x-[48px]">
<div className="hidden w-[200px] flex-shrink-0 pt-5 lg:block">
<p className="text-sm font-medium leading-[20px] text-cardGray">
Filter By
</p>

<div className="border-b pb-2"></div>

<div className="mt-4 flex flex-col gap-y-4">
<p
onClick={() => {
onIsFilteringActiveClick(true);
onIsFilteringAuditedClick(false);
}}
className={`inline-flex cursor-pointer text-base font-medium hover:text-primary ${
isFilteringActive ? "text-primary" : "text-para"
}`}
>
Active
</p>
<p
onClick={() => {
onIsFilteringAuditedClick(true);
onIsFilteringActiveClick(false);
}}
className={`inline-flex cursor-pointer text-base font-medium hover:text-primary ${
isFilteringAudited ? "text-primary" : "text-para"
}`}
>
Audited
</p>
</div>
<div className="">
<div className="my-8 border-b pb-2" />
<p className="text-sm font-medium text-para">
Start Earning and join our community today!
</p>

<a href="/providers">
<button className="mt-3 rounded-lg border border-[#D1D5DB] bg-background2 px-4 py-2 text-center font-medium ">
Become a Provider
</button>
</a>
</div>
</div>

<div className=" flex justify-between lg:gap-x-[20px] xl:gap-x-[48px]">
<div className="w-full">
<div className="flex items-center justify-between">
<h3 className="text-[20px] font-bold leading-[28px] md:text-2lg md:leading-[48px]">
Providers
</h3>
<div className="flex flex-col items-center justify-between gap-6 md:flex-row">
<h2 id="overview" className="text-base font-semibold md:text-xl">
List of Providers
</h2>

<div className="flex flex-shrink-0 items-center gap-x-3 md:gap-x-3 lg:gap-x-9">
<SortDropDown
Expand All @@ -291,9 +156,11 @@ function Layout({ pathName, initialProviders }: any) {
</div>
</div>

{currentPageProviders.length === 0 && <p>No providers found</p>}
{currentPageProviders.length === 0 && (
<p className="py-6 text-center">No providers found</p>
)}

<div className="mt-4 grid w-full grid-cols-1 gap-5 sm:grid-cols-2 md:grid-cols-2 md:gap-5 lg:grid-cols-2 lg:gap-5 xl:grid-cols-3 ">
<div className="mt-4 grid w-full grid-cols-1 gap-5 sm:grid-cols-2 md:grid-cols-2 md:gap-5 lg:grid-cols-3 lg:gap-5 ">
{currentPageProviders.map((provider: any) => {
return (
<ProvidersCard key={provider.owner} provider={provider} />
Expand Down Expand Up @@ -335,59 +202,3 @@ function Layout({ pathName, initialProviders }: any) {
</>
);
}

const SearchIcon = () => {
return (
<>
<div className="hidden md:block" id="searchIcon">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M15.498 15.5L18.998 19"
stroke="#272540"
strokeWidth="1.17434"
strokeLinecap="round"
strokeLinejoin="round"
></path>
<path
d="M5 11C5 14.3137 7.68629 17 11 17C12.6597 17 14.1621 16.3261 15.2483 15.237C16.3308 14.1517 17 12.654 17 11C17 7.68629 14.3137 5 11 5C7.68629 5 5 7.68629 5 11Z"
stroke="#272540"
strokeWidth="1.17434"
strokeLinecap="round"
strokeLinejoin="round"
></path>
</svg>
</div>

<div className="block md:hidden" id="searchIcon">
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10.334 10.333L12.6673 12.6663"
stroke="#272540"
strokeWidth="1.17434"
strokeLinecap="round"
strokeLinejoin="round"
></path>
<path
d="M3.33398 7.33301C3.33398 9.54215 5.12485 11.333 7.33398 11.333C8.44047 11.333 9.44202 10.8837 10.1662 10.1577C10.8878 9.43411 11.334 8.43566 11.334 7.33301C11.334 5.12387 9.54312 3.33301 7.33398 3.33301C5.12485 3.33301 3.33398 5.12387 3.33398 7.33301Z"
stroke="#272540"
strokeWidth="1.17434"
strokeLinecap="round"
strokeLinejoin="round"
></path>
</svg>
</div>
</>
);
};
5 changes: 2 additions & 3 deletions src/components/ecosystem-pages/search-dialog.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { Dialog, Transition } from "@headlessui/react";
import { Fragment, useEffect, useState } from "react";

import { ChevronRightIcon } from "@heroicons/react/20/solid";
import { Loader2, Search } from "lucide-react";

import Fuse from "fuse.js"; // Import the Fuse.js library
Expand Down Expand Up @@ -100,7 +99,7 @@ export default function SearchDialog({ currentPath }: { currentPath: string }) {
</button>

<Transition appear show={isOpen} as={Fragment}>
<Dialog as="div" className="relative z-10" onClose={closeModal}>
<Dialog as="div" className="relative z-50" onClose={closeModal}>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
Expand Down Expand Up @@ -145,7 +144,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>
Expand Down
19 changes: 12 additions & 7 deletions src/components/ecosystem-pages/top-header.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,18 @@ console.log(pathName);
const { tags } = Astro.props;
---

<h1 class="text-2xl font-bold md:block md:text-2lg lg:text-3lg">
Explore the Akash Ecosystem
</h1>

<div class="flex items-center justify-between">
<h1 class="text-2xl font-bold md:block md:text-2lg lg:text-3lg">
Explore the Akash Ecosystem
</h1>
<div class="hidden md:block">
<SearchDialog client:load currentPath={astroUrl.pathname} />
</div>
</div>
<div
class="mt-6 flex flex-col justify-between gap-x-6 pb-6 md:mt-8 md:pb-8 lg:mt-10 lg:flex-row lg:border-b lg:pb-10"
>
<EcosystemNavbar pathName={pathName} /><div class="my-5 border-b lg:hidden">
</div>
<div class="my-5 border-b lg:hidden"></div>

<div class="flex items-center justify-between">
<Categories
Expand All @@ -26,6 +29,8 @@ const { tags } = Astro.props;
className=" md:hidden"
page={pathName?.[2]}
/>
<SearchDialog client:load currentPath={astroUrl.pathname} />
<div class="block md:hidden">
<SearchDialog client:load currentPath={astroUrl.pathname} />
</div>
</div>
</div>
3 changes: 1 addition & 2 deletions src/components/header/hamburger-menu-discloser-component.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { Disclosure, Transition } from "@headlessui/react";
import { ChevronDownIcon } from "@heroicons/react/20/solid";
import { ArrowUpRight } from "lucide-react";

interface IFsubCategories {
Expand Down Expand Up @@ -30,7 +29,7 @@ const HamburgerMenuDiscloserComponent = ({ item }: IFProps) => {
</Disclosure.Button>

<Transition
show={true}
show={open}
enter="transition duration-100 ease-out"
enterFrom="transform scale-95 opacity-0"
enterTo="transform scale-100 opacity-100"
Expand Down
Loading

0 comments on commit 3694536

Please sign in to comment.