+
+
+
+ );
+};
+
+export default CheckBox;
diff --git a/src/components/pricing-page/gpus/filter.tsx b/src/components/pricing-page/gpus/filter.tsx
new file mode 100644
index 00000000..320c6bbb
--- /dev/null
+++ b/src/components/pricing-page/gpus/filter.tsx
@@ -0,0 +1,209 @@
+import React, { Fragment } from "react";
+import { Menu, Transition, Popover, Disclosure } from "@headlessui/react";
+import {
+ ArchiveBoxIcon,
+ ArrowRightCircleIcon,
+ ChevronDownIcon,
+ DocumentDuplicateIcon,
+ HeartIcon,
+ PencilSquareIcon,
+ TrashIcon,
+ UserPlusIcon,
+} from "@heroicons/react/20/solid";
+import { clsx as classNames } from "clsx";
+import CheckBox from "./checkbox";
+import { modifyModel, type Gpus } from "./gpu-table";
+
+export const defaultFilters = {
+ modal: [],
+ ram: [],
+ interface: [],
+};
+
+export interface Filters {
+ modal: string[];
+ ram: string[];
+ interface: string[];
+}
+
+interface Options {
+ name: string;
+ value: "modal" | "ram" | "interface";
+ options: { name: string; value: string }[];
+}
+
+export const availabilitySort = () => { };
+
+export default function Filter({
+ setFilteredData,
+ res,
+ filters,
+ setFilters,
+}: {
+ setFilteredData: React.Dispatch
+ 0 ? true : false}
+ >
+ {({ open }) => (
+ <>
+
+
+ {item.name}
+
+
+ {item.options.map((option) => (
+
+
+ )}
+
+ ))}
+
+ );
+}
diff --git a/src/components/pricing-page/gpus/gpu-table.tsx b/src/components/pricing-page/gpus/gpu-table.tsx
new file mode 100644
index 00000000..ab59818e
--- /dev/null
+++ b/src/components/pricing-page/gpus/gpu-table.tsx
@@ -0,0 +1,546 @@
+import {
+ QueryClient,
+ QueryClientProvider,
+ useQuery,
+} from "@tanstack/react-query";
+import axios from "axios";
+import React, { useEffect, useState } from "react";
+import {
+ HoverCard,
+ HoverCardContent,
+ HoverCardTrigger,
+} from "@/components/ui/hover-card";
+import { Info } from "lucide-react";
+import { gpus } from "@/utils/api";
+import clsx from "clsx";
+import CheckBox from "./checkbox";
+import Filter, { defaultFilters, type Filters } from "./filter";
+import Sort from "./sort";
+import { useStorage } from "@/utils/store";
+import { Skeleton } from "../../ui/skeleton";
+import Nav from "./nav";
+import arrowUpRight from '../../../assets/icons/arrow-up-right.svg';
+
+export interface Gpus {
+ availability: { total: number; available: number };
+ models: Array<{
+ vendor: string;
+ model: string;
+ ram: string;
+ interface: string;
+ availability: { total: number; available: number };
+ providerAvailability: { total: number; available: number };
+ price: {
+ min: number;
+ max: number;
+ avg: number;
+ med: number;
+ weightedAverage: number;
+ };
+ }>;
+ time?: number;
+}
+
+const GpuTable = ({
+ initialData,
+ subCom,
+}: {
+ initialData?: any;
+ subCom?: boolean;
+}) => {
+ const queryClient = new QueryClient();
+
+ return (
+ Filtering Options
+ {options?.map((item) => ( +
+ {
+ if (e.target.checked) {
+ setFilters((prev) => ({
+ ...prev,
+ [item.value]: [
+ ...prev[item.value],
+ option.value,
+ ],
+ }));
+ } else {
+ setFilters((prev) => ({
+ ...prev,
+ [item.value]: prev[item.value].filter(
+ (filter) => filter !== option.value,
+ ),
+ }));
+ }
+ }}
+ checked={filters?.[item.value]?.includes(
+ option.value,
+ )}
+ />
+
+ ))}
+
+
+
+
+
+
+
+
+ + Total GPUs +
+ { + isLoading ? +{data?.availability?.total || 0}
+ } +
+
+
+
+ {
+ isLoading ?
+
+ {((data?.availability?.available || 0) / (data?.availability?.total || 1) * 100).toFixed(2)}% Available
+ } +
+
+ {
+ isLoading ?
+
+ {(100 - ((data?.availability?.available || 0) / (data?.availability?.total || 1) * 100)).toFixed(2)}% Used
+ } +
+ Round
+
+
+
+
+ {/* //most availability at top */}
+
+ {isLoading
+ ? new Array(10).fill(0).map((_, index) => (
+
+
+
+
+ ))
+ : filteredData?.map((model, index) => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Avg:
+
+
+
+
+
+
+
+ ))}
+
+ 
+
+
+
+ + {modifyModel(model?.model)} +
+
+
+
+
+
+ vRAM:
+{model?.ram}
+
+
+ + Interface: +
+{model?.interface}
+
+
+ + Availability: +
++ + {model?.availability?.available} + + + (of {model?.availability?.total}) + +
+
+
+
+
+
+ | + Chipset + | ++ Availability + | ++ Price (USD) + | ++ |
|---|---|---|---|
|
+
+
+
+
+ |
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+ |
+
|
+
+
+
+
+
+ {modifyModel(model?.model)} +{model?.ram} {model?.interface} + |
+
+
+
+ {model?.availability?.available} Available
+
+
+ (out of {model?.availability?.total})
+
+
+
+ |
+
+
+
+ Average price:
+
+
+ ${model?.price?.avg || 0}
+
+
+
+
+
+
+
+ {model?.providerAvailability?.available || 0} providers{" "}
+
+ |
+
+
+ Rent Now + |
+
+
+ );
+};
diff --git a/src/components/pricing-page/gpus/nav.tsx b/src/components/pricing-page/gpus/nav.tsx
new file mode 100644
index 00000000..e64702f6
--- /dev/null
+++ b/src/components/pricing-page/gpus/nav.tsx
@@ -0,0 +1,44 @@
+import Tag from "./tag";
+
+const Nav = ({ pathName }: any) => {
+ return (
+ <>
+
+ {/* */}
+ Min: {price(model?.price?.min)}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Rent Now
+
+ + + Avg: + + + {price(model?.price?.weightedAverage)} + +
+
+
+
+
+ {model?.providerAvailability?.available || 0} providers{" "}
+
+
+
+ {model?.providerAvailability?.available || 0} providers{" "}
+
+ offering this model
+
+
+
+
+
+
+ Max:
+
+ {price(model?.price?.max)}/hr
+
+
+
+ Min:
+
+ {price(model?.price?.min)}/hr
+
+
+
+ Avg:
+
+ {price(model?.price?.weightedAverage)}/hr
+
+
+ Max: {price(model?.price?.max)}
+ {/* */}
+
+
+
+
+ );
+};
+
+export default Nav;
diff --git a/src/components/pricing-page/gpus/sort.tsx b/src/components/pricing-page/gpus/sort.tsx
new file mode 100644
index 00000000..465fe6c8
--- /dev/null
+++ b/src/components/pricing-page/gpus/sort.tsx
@@ -0,0 +1,138 @@
+import { Fragment, useEffect, useState } from "react";
+import { Listbox, Transition } from "@headlessui/react";
+import { CheckIcon, ChevronDownIcon } from "@heroicons/react/20/solid";
+import { clsx as classNames } from "clsx";
+import type { Gpus } from "./gpu-table";
+import type { Filters } from "./filter";
+const publishingOptions = [
+ { title: "Availability" },
+ { title: "Lowest Price" },
+ { title: "Highest Price" },
+];
+
+export default function Sort({
+ setFilteredData,
+ res,
+ filters,
+}: {
+ setFilteredData: React.Dispatch
+
+ Showcase
+
+
+
+
+
+ Tools
+
+
+
+
+
+ Deployed on Akash
+
+
+
+
+
+ Akash Providers
+
+
+
+
+ {selected.title}
+
+
+
+
+
+ {publishingOptions.map((option) => (
+
+ classNames(
+ active ? "bg-primary text-white" : "text-textGray",
+ "relative cursor-default select-none py-2 pl-8 pr-4",
+ )
+ }
+ value={option}
+ >
+ {({ selected, active }) => (
+ <>
+
+ {option.title}
+
+
+ {selected ? (
+
+
+
+ ) : null}
+
+ )}
+
+ ))}
+
+
+
+
+ )}
+
+
+ );
+};
+
+export default MonthEarning;
diff --git a/src/components/pricing-page/provider/pricing-unit.tsx b/src/components/pricing-page/provider/pricing-unit.tsx
new file mode 100644
index 00000000..78ff0fd8
--- /dev/null
+++ b/src/components/pricing-page/provider/pricing-unit.tsx
@@ -0,0 +1,51 @@
+import React, { useEffect, useState } from "react";
+import ProgressBar from "./progress-bar";
+
+type PricingUnitProps = {
+ progress: number;
+ setProgress: React.Dispatch{title}
+{value}/month
+
+
+ );
+}
+
+export default PricingUnit;
diff --git a/src/components/pricing-page/provider/progress-bar.tsx b/src/components/pricing-page/provider/progress-bar.tsx
new file mode 100644
index 00000000..6bb0c553
--- /dev/null
+++ b/src/components/pricing-page/provider/progress-bar.tsx
@@ -0,0 +1,17 @@
+type ProgressBarProps = {
+ progress: number;
+ max: number;
+};
+
+function ProgressBar({ progress, max }: ProgressBarProps) {
+ return (
+
+
+
+
+ + {title} +
++ {content} +
+
+ {progress}{title === 'CPU' ? '%' : ''}
+
+
+
+
+
+
+ );
+}
+
+export default ProgressBar;
diff --git a/src/components/pricing-page/provider/provider-table.tsx b/src/components/pricing-page/provider/provider-table.tsx
new file mode 100644
index 00000000..0106b48c
--- /dev/null
+++ b/src/components/pricing-page/provider/provider-table.tsx
@@ -0,0 +1,448 @@
+import {
+ QueryClient,
+ QueryClientProvider,
+ useQuery,
+} from "@tanstack/react-query";
+import axios from "axios";
+import React, { useEffect, useState } from "react";
+import { gpus } from "@/utils/api";
+import clsx from "clsx";
+import MonthEarning from "./month-earning";
+import _ from 'lodash'
+import arrowUpRight from '../../../assets/icons/arrow-up-right.svg';
+import PricingUnit from "./pricing-unit";
+import CpuBrand from '../../../assets/cpu-brand.svg'
+import MemoryBrand from '../../../assets/memory-brand.svg'
+import StorageBrand from '../../../assets/storage-brand.svg'
+import GpuBrand from '../../../assets/gpu-brand.svg'
+import IpsBrand from '../../../assets/ips-brand.svg'
+import EndpointBrand from '../../../assets/endpoint-brand.svg'
+
+export interface Gpus {
+ availability: { total: number; available: number };
+ models: Array<{
+ vendor: string;
+ model: string;
+ ram: string;
+ interface: string;
+ availability: { total: number; available: number };
+ providerAvailability: { total: number; available: number };
+ price: {
+ min: number;
+ max: number;
+ avg: number;
+ med: number;
+ weightedAverage: number;
+ };
+ }>;
+ time?: number;
+}
+
+const ProviderTable = ({
+ initialData,
+ pathName,
+ subCom,
+}: {
+ initialData?: any;
+ pathName?: any;
+ subCom?: boolean;
+}) => {
+ const queryClient = new QueryClient();
+
+ return (
+
+
+
+
+ Estimated Earnings
+ +
+
+ Estimated Breakdown
+
+
+
+
+ Estimated Earnings
+
+
+
+
+
+
+ + Resources pricing +
++ Usage % (Leases in your provider) +
+
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+
+ );
+};
+
+export default Compare;
diff --git a/src/components/pricing-page/usage/disclaimer.tsx b/src/components/pricing-page/usage/disclaimer.tsx
new file mode 100644
index 00000000..562755ad
--- /dev/null
+++ b/src/components/pricing-page/usage/disclaimer.tsx
@@ -0,0 +1,15 @@
+import { Info } from "lucide-react";
+
+function Disclaimer() {
+ return (
+
+
+
+ 
+
+ AWS
+
+
+ Estimated Cost:
++ ${mock} +
+
+
+
+ 
+
+ GCP
+
+
+ Estimated Cost:
++ ${mock} +
+
+
+
+ 
+
+ Azure
+
+
+ Estimated Cost:
++ ${mock} +
+
+
+ );
+}
+
+export default Disclaimer;
diff --git a/src/components/pricing-page/usage/progress-bar.tsx b/src/components/pricing-page/usage/progress-bar.tsx
new file mode 100644
index 00000000..51a6a361
--- /dev/null
+++ b/src/components/pricing-page/usage/progress-bar.tsx
@@ -0,0 +1,16 @@
+type ProgressBarProps = {
+ progress: number;
+};
+
+function ProgressBar({ progress }: ProgressBarProps) {
+ return (
+ Disclaimer
+
+
+
+ );
+}
+
+export default ProgressBar;
diff --git a/src/components/pricing-page/usage/usage-amount.tsx b/src/components/pricing-page/usage/usage-amount.tsx
new file mode 100644
index 00000000..4989efb7
--- /dev/null
+++ b/src/components/pricing-page/usage/usage-amount.tsx
@@ -0,0 +1,46 @@
+import React, { useEffect, useState } from "react";
+import ProgressBar from "./progress-bar";
+
+type UsageAmountProps = {
+ title: string;
+ content: string;
+};
+
+function UsageAmount({ title, content }: UsageAmountProps) {
+
+
+ const [progress, setProgress] = useState
+
+ );
+}
+
+export default UsageAmount;
diff --git a/src/components/pricing-page/usage/usage-table.tsx b/src/components/pricing-page/usage/usage-table.tsx
new file mode 100644
index 00000000..cc12fa1f
--- /dev/null
+++ b/src/components/pricing-page/usage/usage-table.tsx
@@ -0,0 +1,203 @@
+import {
+ QueryClient,
+ QueryClientProvider,
+ useQuery,
+} from "@tanstack/react-query";
+import axios from "axios";
+import React, { useEffect, useState } from "react";
+import {
+ HoverCard,
+ HoverCardContent,
+ HoverCardTrigger,
+} from "@/components/ui/hover-card";
+import { Info } from "lucide-react";
+import { gpus } from "@/utils/api";
+import clsx from "clsx";
+import { Skeleton } from "../../ui/skeleton";
+import arrowUpRight from '../../../assets/icons/arrow-up-right.svg';
+import Compare from "./compare";
+import akashLogo from '../../../assets/akash-logo-primary.svg'
+import ProgressBar from "./progress-bar";
+import Disclaimer from "./disclaimer";
+import UsageAmount from "./usage-amount";
+export interface Gpus {
+ availability: { total: number; available: number };
+ models: Array<{
+ vendor: string;
+ model: string;
+ ram: string;
+ interface: string;
+ availability: { total: number; available: number };
+ providerAvailability: { total: number; available: number };
+ price: {
+ min: number;
+ max: number;
+ avg: number;
+ med: number;
+ weightedAverage: number;
+ };
+ }>;
+ time?: number;
+}
+
+const UsageTable = ({
+ initialData,
+ pathName,
+ subCom,
+}: {
+ initialData?: any;
+ pathName?: any;
+ subCom?: boolean;
+}) => {
+ const queryClient = new QueryClient();
+
+ return (
+
+
+ {title}
+{content}
+
+
+
+
+
+ 240
+
+
+
+
+ 
+
+
+ Price estimate
+
+
+
+
+ 
+
+ Akash Network
+
+
+ Estimated Cost:
++ ${mock.cost} +
+
+
+ + {mock.percent} +
+Deploy Now
+
+
+ Price compare
+
+
+
+
+
+ Usage estimate
+
+
+
+ Explorer pricing and calculate
your costs or earnings
+
+
+
+ + GPU Models, Prices & Availabilty +
++ Browse the list of available GPUs along with their hourly rates. +
+
+ Explorer pricing and calculate
your costs or earnings
+
+
+
+ + Provider Earn Calculator +
++ Calculate your potential earnings by providing resources to the Akash Network. +
+
+ Explorer pricing and calculate
your costs or earnings
+
+
+
+ + Usage Pricing +
+
+ Estimate your costs by selecting the resources you need.
+ Adjust CPU, memory, storage, and other parameters to get a detailed
+ cost breakdown.
+